<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
      <el-button @click="getData()" type="primary" style="margin-left: 2px;margin-top: 0px">{{'查询'}}</el-button>
      <el-button @click="addModal()" type="primary" style="margin-left: 2px;margin-top: 0px">{{'新增'}}</el-button>
    </el-form>
    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="editSite(scope.row)">修改</a>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed"
        :width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="工厂维护" :close-on-click-modal="false" v-drag :visible.sync="siteFlag" width="500px" >
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'工厂编号：'">
          <el-input v-model="siteData.siteID" :disabled="siteInputFlag" style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'工厂名称(中文)：'">
          <el-input v-model="siteData.siteName"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'工厂名称(英文)：'">
          <el-input v-model="siteData.siteNameE"  style="width: 130px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'会计单位：'">
          <el-select v-model="siteData.companyID"  style="width: 130px"
                     placeholder="请选择">
            <el-option
              v-for="(item,index) in selectList"
              :key="index"
              :label="item.companyName"
              :value="item.companyID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'参照客户编码：'">
          <el-input v-model="siteData.referenceCustomerID"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'邮政编码：'">
          <el-input v-model="siteData.postCode"  style="width: 130px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'地址(中文)：'">
          <el-input v-model="siteData.address" type="textarea" :autosize="{ minRows: 3, maxRows: 6}"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'地址(英文)：'">
          <el-input v-model="siteData.addressE" type="textarea" :autosize="{ minRows: 3, maxRows: 6}"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'公司网站：'">
          <el-input v-model="siteData.website" type="textarea" :autosize="{ minRows: 3, maxRows: 6}"  style="width: 130px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'联系人：'">
          <el-input v-model="siteData.contactName"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'电话：'">
          <el-input v-model="siteData.phoneNo"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'传真：'">
          <el-input v-model="siteData.faxNo"  style="width: 130px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'email：'">
          <el-input v-model="siteData.email"  style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'在用：'">
          <el-select filterable v-model="siteData.active" style="width: 130px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'发货时间：'">
          <el-time-picker
            format="HH:mm"
            arrow-control
            style="width: 130px"
            v-model="siteData.shipTime"
            placeholder="请选择"
            value-format="HH:mm">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <el-footer  style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="siteSave()">保存</el-button>
        <el-button type="primary" @click="siteFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>

    import {
      getSiteData,
      getCompanyData,
      siteSave
    } from "@/api/base/site.js"

    export default {
      name: "factoryInformation",
      data() {
        return {
          height: 200,
          siteFlag:false,
          siteInputFlag:true,
          selectList:[],
          siteData: {
            add:'',
            siteID:'',
            siteName:'',
            siteNameE:'',
            companyID:'',
            postCode:'',
            address:'',
            addressE:'',
            website:'',
            contactName:'',
            phoneNo:'',
            faxNo:'',
            email:'',
            active:'Y',
            shipTime:'',
            referenceCustomerID:'',
          },
          dataList:[],
          dataListLoading: false,
          buttons:{
            search:'查询',
          },
          columnList: [
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableSiteID',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "siteID",
              headerAlign: "center",
              align: "left",
              columnLabel: "工厂编码",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 60
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableSiteName',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "siteName",
              headerAlign: "center",
              align: "left",
              columnLabel: "工厂名称",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 120
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableSiteNameE',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "siteNameE",
              headerAlign: "center",
              align: "left",
              columnLabel: "工厂名称(英文)",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 200
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableCompanyID',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "companyID",
              headerAlign: "center",
              align: "left",
              columnLabel: "会计单位",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 100
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableCompanyName',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "companyName",
              headerAlign: "center",
              align: "left",
              columnLabel: "会计单位名称",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 150
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableAddress',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "address",
              headerAlign: "center",
              align: "left",
              columnLabel: "地址",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 200
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableAddressE',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "addressE",
              headerAlign: "center",
              align: "left",
              columnLabel: "地址(英文)",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 200
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableWebsite',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "website",
              headerAlign: "center",
              align: "left",
              columnLabel: "公司网址",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 150
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableContactName',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "contactName",
              headerAlign: "center",
              align: "left",
              columnLabel: "联系人",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 100
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TablePostCode',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "postCode",
              headerAlign: "center",
              align: "left",
              columnLabel: "邮政编码",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 100
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TablePhoneNo',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "phoneNo",
              headerAlign: "center",
              align: "left",
              columnLabel: "电话",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 100
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableFaxNo',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "faxNo",
              headerAlign: "center",
              align: "left",
              columnLabel: "传真",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 100
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableEmail',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "email  ",
              headerAlign: "center",
              align: "left",
              columnLabel: "Email",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 100
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableActive',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "active",
              headerAlign: "center",
              align: "left",
              columnLabel: "在用",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 50
            },
            {
              userId: this.$store.state.user.name,
              functionId: 6001,
              serialNumber: '6001TableShipTime',
              tableId: "6001Table",
              tableName: "工厂信息表",
              columnProp: "shipTime",
              headerAlign: "center",
              align: "left",
              columnLabel: "发货时间",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: false,
              columnWidth: 120
            }
          ],
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.height = window.innerHeight - 180;
        })
      },
      methods: {
        getData(){
          getSiteData().then(({data}) => {
            this.dataList = data.rows
          })
        },
        getSelectData(){
          getCompanyData().then(({data}) => {
            this.selectList = data.rows
          })
        },
        addModal(){
          this.siteData={};
          this.siteData.add=0;
          this.siteInputFlag=false;
          this.siteData.active='Y';
          this.siteFlag=true;
        },
        editSite(row){
          this.siteData=JSON.parse(JSON.stringify(row));
          this.siteData.add=1;
          this.siteInputFlag=true;
          this.siteFlag=true;
        },
        siteSave(){
          siteSave(this.siteData).then(({data}) => {
            if(this.siteData.companyID==''||this.siteData.companyID==null){
              this.$alert("请选择会计单位！",'错误',{
                confirmButtonText:'确定'
              })
              return false;
            }
            if(this.siteData.siteID==''||this.siteData.siteID==null){
              this.$alert("请输入工厂编码！",'错误',{
                confirmButtonText:'确定'
              })
              return false;
            }
            if(this.siteData.siteName==''||this.siteData.siteName==null){
              this.$alert("请输入工厂名称！",'错误',{
                confirmButtonText:'确定'
              })
              return false;
            }

            if (data && data.code == 200) {
              this.siteFlag = false
              this.getData();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }
      },
      created() {
        this.getData();
        this.getSelectData();
      }
    }
</script>

<style >
  .el-textarea__inner {
    padding: 5px 5px;
  }
</style>
