<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.keyWord"
        placeholder="请输入关键字"
        style="width: 200px"
        class="filter-item"
        :maxlength="30"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        style="margin-left: 40px"
        class="filter-item"
        type="primary"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px" type="primary" @click="handleCreate">
        新增
      </el-button>

      <div class="fr">
        <el-button v-waves class="filter-item" type="primary" @click="handleTmpDownload">
          模板下载
        </el-button>
        <el-upload
          v-waves
          name="file"
          style="margin-left: 10px; display: inline-block; vertical-align: 4px"
          :show-file-list="false"
          :on-success="getList"
          action="/zhgd/system/sys/pro/importProData"
        >
          <el-button v-waves type="primary">导入</el-button>
        </el-upload>

        <el-button v-waves class="filter-item" style="margin-left: 10px" type="primary" @click="handleExport">
          导出
        </el-button>
      </div>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :max-height="tableHeight"
    >
      <el-table-column label="序号" align="center" width="80" type="index">
        <template scope="scope">
          <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column key="org" label="建管单位" align="center" prop="org" />
      <el-table-column key="proName" label="工程名称" prop="proName" align="center" :show-overflow-tooltip="true" />
      <el-table-column key="bidCode" label="标段编码" prop="bidCode" align="center" />
      <el-table-column key="proCode" label="工程编码" prop="proCode" align="center" />
      <el-table-column key="signCode" label="单项编码" prop="signCode" align="center" />
      <el-table-column key="proType" label="工程类型" align="center" prop="proType" />
      <el-table-column prop="proScale" label="规模" align="center" />
      <el-table-column prop="jlUnit" label="监理单位" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="sgUnit" label="施工单位" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="manager" label="项目经理" align="center" />
      <el-table-column prop="planStartTime" label="计划开始时间" align="center" />
      <el-table-column prop="startTime" label="实际开始时间" align="center" />
      <el-table-column prop="planEndTime" label="计划结束时间" align="center" />
      <el-table-column prop="endTime" label="实际结束时间" align="center" />
      <el-table-column prop="proCost" label="项目总成本" align="center" />
      <el-table-column prop="bidType" label="标段类型" align="center" />
      <el-table-column prop="sgManage" label="施工项目经理" align="center" />
      <el-table-column prop="jlManage" label="监理工程师" align="center" />
      <el-table-column prop="subType" label="变电站类型" align="center" />
      <el-table-column prop="tcDate" label="投产时间" align="center" />
      <el-table-column prop="proFileNum" label="平面图" align="center">
        <template slot-scope="{ row, $index }">
          <el-button type="text" size="mini" @click="handleViewImage(row, $index, '2')">{{ row.proFileNum }}</el-button>
          <el-image
            v-show="false"
            ref="imageView"
            style="width: 0; height: 0;"
            :src="null"
            :preview-src-list="currentImageViewList"
          />
        </template>
      </el-table-column>
      <el-table-column prop="proImgFileNum" label="图片" align="center">
        <template slot-scope="{ row, $index }">
          <el-button type="text" size="mini" @click="handleViewImage(row, $index, '1')">{{ row.proImgFileNum }}</el-button>
          <el-image
            v-show="false"
            ref="imageView2"
            style="width: 0; height: 0;"
            :src="null"
            :preview-src-list="currentImageViewList"
          />
        </template>
      </el-table-column>
      <el-table-column prop="proBrief" label="工程简介" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column label="操作" align="center" class-name="fixed-width" width="250" fixed="right">
        <template slot-scope="{ row, $index }">
          <el-button v-if="row.status !== '完工'" v-waves type="text" size="mini" @click="handleUpdate(row, $index)">编辑</el-button>
          <el-button v-waves type="text" size="mini" @click="handleProcess(row, $index)">工序计划</el-button>
          <el-button v-waves type="text" size="mini" @click="handleCost(row, $index)">工程成本</el-button>
          <el-button v-if="row.proType === '线路'" v-waves type="text" size="mini" @click="handleGT(row, $index)">杆塔管理</el-button>
          <el-button v-if="row.status !== '完工'" v-waves type="text" size="mini" @click="handleComplete(row, $index)">完工</el-button>
          <el-button v-waves type="text" size="mini" @click="handleDelete(row, $index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="630px" top="0" @closed="handleClosedModal">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="建管单位：" prop="org">
          <BuildSelect :current-build.sync="temp.org" />
        </el-form-item>
        <el-form-item label="工程名称：" prop="proName">
          <el-input v-model="temp.proName" placeholder="工程名称" :maxlength="50" />
        </el-form-item>
        <el-form-item label="工程状态：" prop="status">
          <ProjectStatusSelect :bind-value.sync="temp.status" />
        </el-form-item>
        <el-form-item label="所属项目：" prop="proCode">
          <ProjectNoSelect :current-id.sync="temp.proCode" @change="handleProChange" />
        </el-form-item>
        <el-form-item label="所属单项工程：" prop="signCode">
          <SingleProSelect ref="singleProSelectRef" :current-id.sync="temp.signCode" :pro-no="temp.proCode" />
        </el-form-item>
        <el-form-item label="标段编码：" prop="bidCode">
          <el-input v-model="temp.bidCode" placeholder="标段编码" :maxlength="50" :disabled="textMap[dialogStatus] === 'update'" />
        </el-form-item>
        <el-form-item label="工程类型：" prop="proType">
          <el-select v-model="temp.proType" placeholder="请选择" style="width: 100%">
            <el-option key="变电" value="变电" label="变电" />
            <el-option key="线路" value="线路" label="线路" />
          </el-select>
        </el-form-item>
        <el-form-item label="规模：" prop="proScale">
          <el-input v-model="temp.proScale" placeholder="规模" :maxlength="50" />
        </el-form-item>
        <el-form-item label="监理单位：" prop="jlUnit">
          <el-input v-model="temp.jlUnit" placeholder="监理单位" :maxlength="50" />
        </el-form-item>
        <el-form-item label="施工单位：" prop="sgUnit">
          <el-input v-model="temp.sgUnit" placeholder="施工单位" :maxlength="50" />
        </el-form-item>
        <el-form-item label="项目经理：" prop="manager">
          <el-input v-model="temp.manager" placeholder="项目经理" :maxlength="50" />
        </el-form-item>
        <el-form-item label="计划开始时间：" prop="planStartTime">
          <el-date-picker
            v-model="temp.planStartTime"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="实际开始时间：" prop="startTime">
          <el-date-picker
            v-model="temp.startTime"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="计划结束时间：" prop="planEndTime">
          <el-date-picker
            v-model="temp.planEndTime"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="实际结束时间：" prop="endTime">
          <el-date-picker
            v-model="temp.endTime"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="项目总成本：" prop="proCost">
          <el-input v-model="temp.proCost" placeholder="项目总成本" :maxlength="50" />
        </el-form-item>
        <el-form-item label="平面图：" prop="imageList">
          <el-upload
            ref="pictureUpload"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="imageUploadLimit"
            :file-list="imageList"
            :on-change="handleImageChange"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemoveImageItem(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片上传：" prop="imageList2">
          <el-upload
            ref="pictureUpload2"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="imageList2"
            :limit="imageUploadLimit2"
            :on-change="handleImageChange2"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemoveImage2Item(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="工程简介：" prop="proBrief">
          <el-input v-model="temp.proBrief" type="textarea" :rows="2" placeholder="工程简介" :maxlength="200" />
        </el-form-item>

        <el-form-item label="标段类型：" prop="bidType">
          <el-select v-model="temp.bidType" placeholder="请选择" style="width: 100%">
            <el-option :key="0" :value="0" label="设计" />
            <el-option :key="1" :value="1" label="监理" />
            <el-option :key="2" :value="2" label="施工" />
            <el-option :key="3" :value="3" label="监理加施工" />
          </el-select>
        </el-form-item>
        <el-form-item label="施工项目经理：" prop="sgManage">
          <el-input v-model="temp.sgManage" :rows="2" placeholder="施工项目经理" :maxlength="50" />
        </el-form-item>
        <el-form-item label="监理工程师：" prop="jlManage">
          <el-input v-model="temp.jlManage" :rows="2" placeholder="监理工程师" :maxlength="50" />
        </el-form-item>
        <el-form-item label="变电站类型：" prop="subType">
          <el-select v-model="temp.subType" placeholder="请选择" style="width: 100%">
            <el-option :key="1" :value="1" label="土建" />
            <el-option :key="2" :value="2" label="电气" />
            <el-option :key="3" :value="3" label="变电" />
          </el-select>
        </el-form-item>
        <el-form-item label="投产时间：" prop="tcDate">
          <el-date-picker
            v-model="temp.tcDate"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-waves @click="dialogFormVisible = false"> 关闭 </el-button>
        <el-button v-waves type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>

    <!--    完工-->
    <el-dialog title="完工" :visible.sync="completeModalVisible" width="500px" @closed="handleClosedCompleteModal">
      <el-form
        ref="completeForm"
        :rules="completeRules"
        :model="completeForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="工程名称：" prop="proName">
          <el-input v-model="completeForm.proName" :maxlength="16" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-checkbox v-model="completeForm.status">完工</el-checkbox>
        </el-form-item>
        <el-form-item label="实际结束时间：" prop="endTime">
          <el-date-picker
            v-model="completeForm.endTime"
            style="width: 100%"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-waves @click="completeModalVisible = false"> 关闭 </el-button>
        <el-button v-waves type="primary" @click="completeProject">
          提交
        </el-button>
      </div>
    </el-dialog>

    <!--工序-->
    <ProcessTable :component-visible.sync="processModalVisible" :process-type="processType" :bid-code="bidCode" />

    <CostTable :component-visible.sync="costModalVisible" :current-id="bidCode" />

    <!--杆塔管理-->
    <GtTable :component-visible.sync="gtModalVisible" :current-id="bidCode" />
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import BuildSelect from './components/BuildSelect.vue'
import ProcessTable from '@/views/basic/project/components/ProcessTable.vue'
import {
  addProjectItem, completeProject,
  deleteProjectItem, downloadProjectTemplate,
  exportProject, getProjectItemDetail,
  getProjectList, getViewImageList, updateProjectItem
} from '@/api/basic/project'

import _ from 'lodash/fp'
import { downloadFile } from '@/utils/download'
import ProjectStatusSelect from '@/views/basic/project/components/ProjectStatusSelect.vue'
import GtTable from '@/views/basic/project/components/GtTable.vue'
import CostTable from '@/views/basic/project/components/CostTable.vue'
import ProjectNoSelect from '@/views/basic/single/components/ProjectNoSelect.vue'
import SingleProSelect from '@/views/basic/single/components/SingleProSelect.vue'

const defaultTmp = {
  org: '',
  bidCode: '',
  signCode: '',
  proCode: '',
  proName: '',
  proType: '',
  proScale: '',
  jlUnit: '',
  sgUnit: '',
  manager: '',
  planStartTime: '',
  startTime: '',
  planEndTime: '',
  endTime: '',
  proCost: '',
  proFileNum: '',
  proImgFileNum: '',
  proBrief: '',
  bidType: '',
  sgManage: '',
  jlManage: '',
  subType: '',
  tcDate: ''
}

const defaultCompleteTmp = {
  proId: '',
  proName: '',
  status: false,
  endTime: ''
}

export default {
  components: {
    SingleProSelect,
    ProjectNoSelect, CostTable, GtTable, ProjectStatusSelect, Pagination, BuildSelect, ProcessTable },
  directives: { waves },
  data() {
    return {
      // 建筑单位列表
      buildOptions: [],
      imageList: [],
      imageList2: [],
      delFiles: [],
      currentImageViewList: [],
      imageUploadLimit: 1,
      imageUploadLimit2: 5,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        keyWord: ''
      },
      tableHeight: 650,
      showReviewer: false,
      temp: _.cloneDeep(defaultTmp),
      dialogFormVisible: false,
      dialogStatus: '',
      downloadLoading: false,
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogPvVisible: false,
      completeModalVisible: false,
      processModalVisible: false,
      gtModalVisible: false,
      costModalVisible: false,
      processType: '',
      bidCode: '',
      completeForm: _.cloneDeep(defaultCompleteTmp),
      rules: {
        org: [{ required: true, message: '请选择', trigger: 'change' }],
        proName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        proType: [{ required: true, message: '请选择', trigger: 'change' }],
        proScale: [{ required: true, message: '不能为空', trigger: 'blur' }],
        jlUnit: [{ required: true, message: '不能为空', trigger: 'blur' }],
        sgUnit: [{ required: true, message: '不能为空', trigger: 'blur' }],
        manager: [{ required: true, message: '不能为空', trigger: 'blur' }],
        planStartTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // startTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
        planEndTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // endTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
        proCost: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // imageList: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        // imageList2: [{ required: true, message: '请上传图片', trigger: 'change' }],
        imageList2: [{ type: 'array', required: true, validator: this.validateImageNum, trigger: 'change' }],
        signCode: [{ required: true, message: '请选择', trigger: 'change' }],
        proCode: [{ required: true, message: '请选择', trigger: 'change' }],
        bidType: [{ required: true, message: '请选择', trigger: 'change' }],
        subType: [{ required: true, message: '请选择', trigger: 'change' }],
        bidCode: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      completeRules: {
        status: [{ required: true, message: '不能为空', trigger: 'blur' }],
        proName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        endTime: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 图片上传验证
    validateImageNum(rule, value, callback) {
      if (this.imageList2.length) {
        callback()
      } else {
        callback(new Error('请上传图片'))
      }
    },
    handleValidateField(name, type) {
      this.$refs[name].validateField(type)
    },
    getList() {
      this.listLoading = true
      getProjectList(this.listQuery).then((response) => {
        this.list = response.rows
        this.total = response.total
      }).finally(() => {
        this.listLoading = false
      })
    },
    // 查询
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 模板下载
    handleTmpDownload() {
      downloadProjectTemplate().then(res => {
        downloadFile({ fileName: '工程模板.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
      })
    },
    // 导出
    handleExport() {
      exportProject().then(res => {
        downloadFile({ fileName: '工程详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
      })
    },
    // 新增
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    getFileData() {
      const type = []
      const file = []
      this.imageList.forEach(item => {
        if (item?.hasOwnProperty('raw')) {
          file.push(item.raw)
          type.push('2')
        }
      })

      this.imageList2.forEach(item => {
        if (item?.hasOwnProperty('raw')) {
          file.push(item.raw)
          type.push('1')
        }
      })

      return { file, type }
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const reqData = new FormData()
          reqData.append('params', JSON.stringify(this.temp))
          const { type, file } = this.getFileData()
          file.forEach(item => {
            reqData.append('file[]', item)
          })
          reqData.append('type[]', type)
          addProjectItem(reqData).then((response) => {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.dialogFormVisible = false
            this.getList()
          }).finally(() => {
            // this.dialogFormVisible = false
          })
        }
      })
    },
    // 编辑工程
    handleUpdate(row) {
      getProjectItemDetail({ proId: row.proId }).then((res) => {
        this.temp = Object.assign({}, res.data)
        const { fileData } = res.data

        const imageList = []
        const imageList2 = []
        this.delFiles = []

        if (fileData?.length) {
          fileData.forEach(item => {
            const { base64Url, fileId } = item
            if (item.fileSourceType === '2') {
              imageList.push({
                name: fileId,
                url: base64Url
              })
            } else {
              imageList2.push({
                name: fileId,
                url: base64Url
              })
            }
          })
        }
        this.imageList = imageList
        this.imageList2 = imageList2
      })
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const reqData = new FormData()
          const reqD = _.cloneDeep(this.temp)
          reqD['delFiles'] = this.delFiles.join(',')
          delete reqD['fileData']
          reqData.append('params', JSON.stringify(reqD))

          const { type, file } = this.getFileData()
          file.forEach(item => {
            reqData.append('file[]', item)
          })
          reqData.append('type[]', type)

          updateProjectItem(reqData).then((response) => {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.dialogFormVisible = false
            this.getList()
          }).finally(() => {
            // this.dialogFormVisible = false
          })
        }
      })
    },
    // 完工
    handleComplete(row) {
      this.completeModalVisible = true
      const { proId, proName, status, endTime } = row
      this.completeForm = {
        proId, proName, status: status === '完工', endTime
      }
    },
    completeProject() {
      this.$refs['completeForm'].validate((valid) => {
        if (valid) {
          completeProject(this.completeForm).then((response) => {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.getList()
          }).finally(() => {
            this.completeModalVisible = false
          })
        }
      })
    },
    // 设置工序
    handleProcess(row) {
      this.processType = row.proType
      this.bidCode = row.bidCode
      this.processModalVisible = true
    },
    // 杆塔管理
    handleGT(row) {
      this.processType = row.proType
      this.bidCode = row.bidCode
      this.gtModalVisible = true
    },
    handleCost(row) {
      this.bidCode = row.bidCode
      this.costModalVisible = true
    },
    // 删除数据
    handleDelete(row, index) {
      this.$confirm(`确定要删除该数据吗？`, {
        type: 'warning',
        title: '操作提示',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            deleteProjectItem({ proId: row.proId, bidCode: row.bidCode }).then((response) => {
              done()
              this.$message({
                showClose: true,
                message: response.msg,
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
          } else {
            done()
          }
        }
      })
    },
    // 图片上传
    handleImageChange(file, fileList) {
      this.imageList = fileList
      this.handleValidateField('dataForm', 'imageList')
    },
    handleImageChange2(file, fileList) {
      this.imageList2 = fileList
      this.handleValidateField('dataForm', 'imageList2')
    },
    handleRemoveImageItem(file) {
      if (!file?.hasOwnProperty('raw')) {
        this.delFiles.push(file.name)
      }
      const uploadFiles = this.$refs.pictureUpload.uploadFiles
      for (const i in uploadFiles) {
        if (file.url === uploadFiles[i].url) {
          uploadFiles.splice(i, 1)
        }
      }
      this.imageList = uploadFiles
      this.handleValidateField('dataForm', 'imageList')
    },
    handleRemoveImage2Item(file) {
      if (!file?.hasOwnProperty('raw')) {
        this.delFiles.push(file.name)
      }
      const uploadFiles = this.$refs.pictureUpload2.uploadFiles
      for (const i in uploadFiles) {
        if (file.url === uploadFiles[i].url) {
          uploadFiles.splice(i, 1)
        }
      }
      this.imageList2 = uploadFiles
      this.handleValidateField('dataForm', 'imageList2')
    },
    handleClosedModal() {
      this.imageList = []
      this.imageList2 = []
      this.$refs['dataForm'].resetFields()
      this.temp = _.cloneDeep(defaultTmp)
    },
    handleClosedCompleteModal() {
      this.$refs['completeForm'].resetFields()
      this.completeForm = _.cloneDeep(defaultCompleteTmp)
    },
    // 图片预览
    handleViewImage(row, index, type) {
      const reqData = {
        proId: row.proId,
        fileType: type
      }
      const refName = type === '1' ? 'imageView2' : 'imageView'
      getViewImageList(reqData).then(res => {
        const { data } = res
        this.currentImageViewList = data.map(item => {
          return item.base64Url
        })
        this.$refs[refName].showViewer = true
      })
    },
    handleProChange(val) {
      const singleProSelectRef = this.$refs.singleProSelectRef
      this.$nextTick(() => {
        singleProSelectRef.getList(() => {
          const list = singleProSelectRef.options
          console.log(list)
          if (this.temp.signCode && !list.find(item => item.value === this.temp.signCode)) {
            this.temp.signCode = ''
          }
        })
      })
    }
  }
}
</script>
