<template>
  <div class="mod-config">
    <el-dialog
      width="600px"
      :title="!dataForm.id ?  '添加' :'编辑'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :inline="true" label-position="top" label-width="100px" :rules="dataRole">
        <el-form-item  >
          <span slot="label" style="" @click="chooseProofingModel()"><a herf="#">打样单号</a></span>
          <el-input v-model="dataForm.proofingNo" style="width: 130px"  @change="changeProofingNoChange" :disabled="dataForm.id!=0"></el-input>
        </el-form-item>
        <el-form-item label=" " >
        <el-checkbox v-model="jumpFlag">保存后跳转至详情</el-checkbox>
        </el-form-item>
        <el-form-item prop="testPartNo" :rules="dataRole.testPartNo" style="margin-left: 12px">
          <span slot="label" style="" @click="getBaseList(134,1)" ><a herf="#">测试料号</a></span>
          <el-input v-model="dataForm.testPartNo" @change="changeTestDesc" style="width: 130px"  ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" :rules="dataRole">
        <el-form-item :label="'正式料号'">
          <el-input v-model="dataForm.finalPartNo" style="width: 130px" disabled></el-input>
        </el-form-item>
        <el-form-item :label="'项目号'">
          <el-input v-model="dataForm.projectId" style="width: 130px" disabled></el-input>
        </el-form-item>

        <el-form-item :label="'物料描述'">
          <el-input v-model="dataForm.partDesc" style="width: 274px" disabled></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" label-position="top" label-width="100px" :rules="dataRole">
        <el-form-item :label="'参数卡编码'" >
          <el-input v-model="dataForm.oriCodeNo" disabled style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'版本号'" prop="revNo" :rules="dataRole.revNo">
          <el-input v-model="dataForm.revNo" style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item >
          <span slot="label" style="" @click="quotationOfficerChooseModal()"><a herf="#">报价员</a></span>
          <el-input v-model="dataForm.quotationOfficer" readonly style="width: 274px"  @focus="quotationOfficerChooseModal()"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item >
          <span slot="label" style="" @click="engineerChooseModal()"><a herf="#">工程师</a></span>
          <el-input v-model="dataForm.engineer" readonly style="width: 274px"  @focus="engineerChooseModal()"></el-input>
        </el-form-item>
        <el-form-item >
          <span slot="label" style="" @click="technicianModal()"><a herf="#">技术员</a></span>
          <el-input v-model="dataForm.technician" readonly style="width: 274px"  @focus="technicianModal()"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'备注'">
          <el-input
            type="textarea"
            v-model="dataForm.remark "
            :rows="3"
            resize='none'
            maxlength="120"
            show-word-limit
            style="width: 562px;height: 60px">
          </el-input>
        </el-form-item>
      </el-form>
      <el-form label-position="top" style="margin-top: 60px; margin-left: 0px;text-align:center">
        <el-button type="primary" @click="dataFormSubmit()">{{'确定'}}</el-button>
        <el-button type="primary" @click="visible = false">{{'关闭'}}</el-button>
      </el-form>
    </el-dialog>
    <el-dialog
      width="530px"
      title="报价员"
      :close-on-click-modal="false"
      :visible.sync="quotationOfficerFlag">
      <el-transfer v-model="quotationOfficerList" class="rq" filterable  :props="{
      key: 'operatorId',
      label: 'operatorName'
    }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="saveQuotationOfficerList()">确定</el-button>
                <el-button @click="quotationOfficerFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>
    <el-dialog
      width="530px"
      title="工程师"
      :close-on-click-modal="false"
      :visible.sync="engineerFlag">
      <el-transfer v-model="engineerList" class="rq" filterable :props="{
      key: 'operatorId',
      label: 'operatorName'
    }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="saveEngineerList()">确定</el-button>
                <el-button @click="engineerFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>
    <el-dialog
      width="530px"
      title="项目负责人"
      :close-on-click-modal="false"
      :visible.sync="ownerFlag">
      <el-transfer v-model="technicianList" class="rq" filterable :props="{
      key: 'operatorId',
      label: 'operatorName'
    }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="savetechnicianList()">确定</el-button>
                <el-button @click="ownerFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>
    <el-dialog
      width="600px"
      title="选择打样单"
      :close-on-click-modal="false"
      :visible.sync="proofingModelFlag">
      <el-form :inline="true" label-position="top" label-width="100px" :rules="dataRole">
        <el-table
          height="300"
          :data="proofingList"
          border
          @row-dblclick="chooseProofingNo"
          style="width: 100%;">
          <el-table-column
            prop="proofingNo"
            header-align="center"
            align="left"
            min-width="120"
            style="font-size: 20px"
            label="打样单">
          </el-table-column>
          <el-table-column
            prop="projectId"
            header-align="center"
            align="left"
            min-width="120"
            style="font-size: 20px"
            label="项目号">
          </el-table-column>
          <el-table-column
            prop="projectName"
            header-align="center"
            align="left"
            min-width="120"
            style="font-size: 20px"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="testPartNo"
            header-align="center"
            align="left"
            min-width="120"
            label="测试料号">
          </el-table-column>
          <el-table-column
            prop="partDesc"
            header-align="center"
            align="left"
            min-width="120"
            label="物料名称">
          </el-table-column>
          <el-table-column
            prop="customerDesc"
            header-align="center"
            align="left"
            min-width="120"
            label="直接客户">
          </el-table-column>
          <el-table-column
            prop="finalCustomerDesc"
            header-align="center"
            align="left"
            min-width="120"
            label="最终客户">
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>


    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {
    searchOperatorWithSite,
  } from "@/api/project/project.js"
  import {technicalSpecificationListSearch,
    saveTechnicalSpecificationSheet,
    searchTechnicalSpecificationTeamStr,
    getTestPartChangeData,
    getProofingDataByUserRole,
  } from "@/api/sampleManagement/technicalSpecificationList.js"
  import Chooselist from '@/views/modules/common/Chooselist'
  export default {
    components: {
      Chooselist
    },
    data () {
      return {
        jumpFlag:true,
        tagNo:'',
        tagNo1:'',
        visible: false,
        treeVisible: false,
        quotationOfficerFlag:false,
        engineerFlag:false,
        userRoleFlag:false,
        ownerFlag:false,
        operatorList:[],
        dataForm: {
          id: 0,
          finalPartNo:'',
          site:this.$store.state.user.site,
          proofingNo:'',
          projectId:'',
          codeNo:'',
          testPartNo:'',
          partDesc:'',
          status:'',
          revNo:'',
          remark:'',
          technician:'',
          quotationOfficer:'',
          engineer:'',
          quotationOfficerList:[],
          engineerList:[],
          technicianList:[],
          oriCodeNo:'',
        },
        quotationOfficerList:[],
        engineerList:[],
        technicianList:[],
        dataRole: {
          testPartNo: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          revNo: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          quotationOfficer: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          engineer: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          technician: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],

        },
        proofingList:[],
        proofingModelFlag:false,
      }
    },
    created () {

    },
    methods: {
      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.tagNo1 = type
        this.$nextTick(() => {
          let strVal = ''
          if (val === 134) {
            if(type==1) {
              strVal = this.dataForm.testPartNo
            }
          }
          if (val === 102) {
            if(type==1) {
              strVal = this.dataForm.customerId
            }
          }
          if (val === 1011) {
            if(type==1) {
              strVal = this.dataForm.projectSource
            }
          }
          if (val === 1012) {
            if(type==1) {
              strVal = this.dataForm.priority
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 134) {
          if(this.tagNo1==1) {
            this.dataForm.testPartNo = val.Test_part_no
            this.dataForm.proofingNo = ''
            this.changeTestDesc();
          }
        }
        if (this.tagNo === 102) {
          if(this.tagNo1==1) {
            this.dataForm.customerId = val.Customer_no
            this.dataForm.customerName = val.Customer_desc
          }
        }
        if (this.tagNo === 1011) {
          if(this.tagNo1==1) {
            this.dataForm.projectSource = val.Base_id
            this.dataForm.projectSourceDesc = val.Base_desc
          }
        }
        if (this.tagNo === 1012) {
          if(this.tagNo1==1) {
            this.dataForm.priority = val.Base_id
            this.dataForm.priorityDesc = val.Base_desc
          }
        }
      },
      init (id) {
        this.jumpFlag=true
        this.dataForm.id = id || 0
        if(this.dataForm.id!=0){
          let inData={
            page: 1,
            limit: 10,
            id:id,
            site:this.$store.state.user.site,
          }
          technicalSpecificationListSearch(inData).then(({data}) => {
            if(data.page.list.length>0){
              this.dataForm= data.page.list[0];
              let inData={
                site:this.dataForm.site,
                codeNo:this.dataForm.codeNo,
                type:'quotationOfficer',
              }
              searchTechnicalSpecificationTeamStr(inData).then(({data}) => {
                this.dataForm.quotationOfficerList=data.rows
              })
              let inData2={
                site:this.dataForm.site,
                codeNo:this.dataForm.codeNo,
                type:'technician',
              }
              searchTechnicalSpecificationTeamStr(inData2).then(({data}) => {
                this.dataForm.technicianList=data.rows
              })
              let inData3={
                site:this.dataForm.site,
                codeNo:this.dataForm.codeNo,
                type:'engineer',
              }
              searchTechnicalSpecificationTeamStr(inData3).then(({data}) => {
                this.dataForm.engineerList=data.rows
              })
            }
          })
        }else {
          this.dataForm={
            id: 0,
            finalPartNo: '',
            site:this.$store.state.user.site,
            proofingNo:'',
            projectId:'',
            codeNo:'',
            testPartNo:'',
            partDesc:'',
            status:'',
            revNo:'',
            remark:'',
            technician:'',
            quotationOfficer:'',
            engineer:'',
            quotationOfficerList:[],
            engineerList:[],
            technicianList:[],
            oriCodeNo:'',
          }

        }
        this.visible = true
      },
      chooseProofingModel(){
        if(this.dataForm.id!=0){
          return false;
        }
        let inData={
          site:this.dataForm.site,
          username:this.$store.state.user.name,
        }
        getProofingDataByUserRole(inData).then(({data}) => {
          this.proofingList=data.rows
        })

        this.proofingModelFlag=true
      },
      changeProofingNoChange(){
        let inData={
          site:this.dataForm.site,
          username:this.$store.state.user.name,
          proofingNo:this.dataForm.proofingNo,
        }
        getProofingDataByUserRole(inData).then(({data}) => {
          let row={
            projectId:'',
            testPartNo:'',
            partDesc:'',
          }
          if(data.rows.length>0){
             row=data.rows[0]
          }
          this.changeProofingNo(row)
        })
      },
      chooseProofingNo(row){
        this.dataForm.proofingNo=row.proofingNo
        this.dataForm.projectId=row.projectId
        this.dataForm.testPartNo=row.testPartNo
        this.dataForm.partDesc=row.partDesc
        this.proofingModelFlag=false
      },
      changeProofingNo(row){
        this.dataForm.projectId=row.projectId
        this.dataForm.testPartNo=row.testPartNo
        this.dataForm.partDesc=row.partDesc
        this.proofingModelFlag=false
      },
      quotationOfficerChooseModal(){
        let inData={
          site:this.dataForm.site,
        }
        searchOperatorWithSite(inData).then(({data}) => {
          this.operatorList=data.rows
        })
        this.quotationOfficerList = JSON.parse(JSON.stringify(this.dataForm.quotationOfficerList));
        this.quotationOfficerFlag=true
      },

      saveQuotationOfficerList(){
        let quotationOfficerName='';
        for (let i = 0; i < this.quotationOfficerList.length; i++) {
          let select= this.operatorList.filter(item => item.operatorId === this.quotationOfficerList[i])
          if(select.length>0){
            quotationOfficerName+=select[0].operatorName+';'
          }
        }
        this.dataForm.quotationOfficer=quotationOfficerName
        this.dataForm.quotationOfficerList=JSON.parse(JSON.stringify(this.quotationOfficerList));
        this.quotationOfficerFlag=false
      },

      engineerChooseModal(){
        let inData={
          site:this.dataForm.site,
        }
        searchOperatorWithSite(inData).then(({data}) => {
          this.operatorList=data.rows
        })
        this.engineerList = JSON.parse(JSON.stringify(this.dataForm.engineerList));
        this.engineerFlag=true
      },

      saveEngineerList(){
        let engineerName='';
        for (let i = 0; i < this.engineerList.length; i++) {
          let select= this.operatorList.filter(item => item.operatorId === this.engineerList[i])
          if(select.length>0){
            engineerName+=select[0].operatorName+';'
          }
        }
        this.dataForm.engineer=engineerName
        this.dataForm.engineerList=JSON.parse(JSON.stringify(this.engineerList));
        this.engineerFlag=false
      },
      technicianModal(){
        let inData={
          site:this.dataForm.site,
        }
        searchOperatorWithSite(inData).then(({data}) => {
          this.operatorList=data.rows
        })
        this.technicianList = JSON.parse(JSON.stringify(this.dataForm.technicianList));
        this.ownerFlag=true
      },
      savetechnicianList(){
        let technicianName='';
        for (let i = 0; i < this.technicianList.length; i++) {
          let select= this.operatorList.filter(item => item.operatorId === this.technicianList[i])
          if(select.length>0){
            technicianName+=select[0].operatorName+';'
          }
        }
        this.dataForm.technician=technicianName
        this.dataForm.technicianList=JSON.parse(JSON.stringify(this.technicianList));
        this.ownerFlag=false
      },

      // 表单提交
      dataFormSubmit () {
        if(this.dataForm.testPartNo===''){
          this.$alert('请输入测试料号！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        if(this.dataForm.revNo===''){
          this.$alert('请输入版本号！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        saveTechnicalSpecificationSheet(this.dataForm).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success( '操作成功')
            this.visible = false
            this.$emit('refreshDataList')
            if(this.jumpFlag){
              this.$nextTick(function () {
                setTimeout(() => {
                  let inData = {
                    site: this.$store.state.user.site,
                    codeNo: data.row.codeNo,
                    buNo: data.row.buNo,
                    username: this.$store.state.user.name
                  };
                  localStorage.setItem('tsfData', JSON.stringify(inData))
                  window.open('#/BMPage');
                },500)
              })
            }

          } else {
            this.$message.error(data.msg)
          }
        })

      },
      changeTestDesc(){
        this.dataForm.proofingNo="";
        let inData={
          site:this.$store.state.user.site,
          testPartNo: this.dataForm.testPartNo
        }
        getTestPartChangeData(inData).then(({data}) => {
          if (data && data.code === 0) {
            if(data.row!=null){
              this.dataForm.projectId=data.row.projectId
              this.dataForm.partDesc=data.row.partDesc
              this.dataForm.finalPartNo=data.row.finalPartNo
            }else {
              this.dataForm.projectId=''
              this.dataForm.partDesc=''
            }

          }
        })
      },
      // changeTestPartNo(){
      //   let inData={
      //     site:this.dataForm.site,
      //     username:this.$store.state.user.name,
      //     testPartNo:this.dataForm.testPartNo,
      //   }
      //   getTestPartChangeData(inData).then(({data}) => {
      //     let row={
      //       projectId:'',
      //       testPartNo:'',
      //       partDesc:'',
      //     }
      //     if(data.rows.length>0){
      //       row=data.rows[0]
      //     }
      //     this.changeProofingNo(row)
      //   })
      // },
    },
  }
</script>

<style >
  .el-transfer-panel {
    border: 2px solid #17b3a3;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }

  .el-transfer-panel .el-transfer-panel__header {
    height: 40px;
    line-height: 40px;
    background: #17b3a3;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #17b3a3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
  }

  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
    color: #303133;
    font-weight: 400;
  }
</style>
