<template>
  <div>
    <div slot="header" class="clearfix">
      <div class="fr">
        <el-button>取消</el-button>
        <el-button type="primary"  >提交</el-button>
      </div>
    </div>
      <el-form :model="filterQuery" size="mini" label-width="100px" >
        <el-row>
          <el-col :span="18">
            <el-form-item class="query-form-item" label="设备编码:">
              <el-input v-model="filterQuery.deviceCode"
                        style="width: 30%"
                        placeholder="输入设备编码"
                        clearable="true"
                        ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="巡检建议:">
              <el-input v-model="filterQuery.suggestion" placeholder="巡检建议"
                        style="width: 90%"
                        clearable="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="巡检项目名称:">
              <el-input v-model="filterQuery.itemName" placeholder="巡检项目名称" clearable="true"
                        style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="产品名称:">
              <el-input v-model="filterQuery.productName" placeholder="产品名称" clearable="true"
                        style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--<el-table v-loading="certLoading" :data="certList" style=" width: 100%;margin-top: 20px" border-->
      <!--          highlight-current-row-->
      <!--&gt;-->
      <!--  <el-table-column type="index" label="序号" width="50"></el-table-column>-->
      <!--  <el-table-column label="设备编码" prop="deviceCode"></el-table-column>-->
      <!--  <el-table-column label="异常次数" prop="exceptionCount"></el-table-column>-->
      <!--  <el-table-column label="完成次数" prop="finishCount"></el-table-column>-->
      <!--  <el-table-column label="巡检项目" prop="itemCount"></el-table-column>-->
      <!--  <el-table-column label="巡检项目名称" prop="itemName"></el-table-column>-->
      <!--  <el-table-column label="巡检建议" prop="suggestion"></el-table-column>-->
      <!--  <el-table-column label="产品名称" prop="productName"></el-table-column>-->
      <!--  <el-table-column label="操作" width="140">-->
      <!--    <template slot-scope="scope">-->
      <!--      <el-button-->
      <!--        type="text"-->
      <!--        size="small"-->
      <!--        @click.native="addCheck(scope.row)"-->
      <!--      >编辑-->
      <!--      </el-button-->
      <!--      >-->
      <!--      <el-button-->
      <!--        type="text"-->
      <!--        size="small"-->
      <!--        @click.native="deleteDeviceCert(scope.row)"-->
      <!--      >删除-->
      <!--      </el-button>-->
      <!--    </template>-->
      <!--  </el-table-column>-->
      <!--</el-table>-->
      <!--<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer"-->
      <!--                 :url-list="imgList"-->
      <!--/>-->
      <!--<pagination-->
      <!--  v-show="certTotal>0"-->
      <!--  :total="certTotal"-->
      <!--  :page.sync="certQuery.page"-->
      <!--  :limit.sync="certQuery.limit"-->
      <!--  @pagination="certHandleCurrentChange"-->
      <!--&gt;</pagination>-->

  </div>
</template>

<script>
import { modifyCompany, addCompany, bindCorp, previewImage } from '@/api/purchase/supCompany'
import store from '@/store'
import { regionDataPlus, CodeToText } from 'element-china-area-data'
// import { filterDeviceUser,insertCompanyUser,deleteDeviceUser,updateDeviceUser } from '@/api/dev/deviceUser'
import { filterDeviceCheck,insertCompanyUser,deleteDeviceUser,updateDeviceUser } from '@/api/dev/deviceCheckDetailApi'
import corpMaintainSelect from '@/views/basic/corpMaintain/corpMaintainSelect'
import depUserAddDialog from '@/views/inventory/user/depUserAddDialog.vue'
import draggable from 'vuedraggable'
import { getUUID, isBlank } from '@/utils/strUtil'
import supCertSetSelectDialog from '@/views/purchase/cert/supCertSetSelectDialog'
import { getBasicUnitMaintains, getCorpList } from '@/api/basic/basicUnitMaintain'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {

  name: 'DeviceCheckEditDialog',
  // dicts: ['device_user_type'],
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    deviceUserType: {
      type: Array,
      required: true,
    },
    inputQuery: {
      type: Object,
      required: true,
    },
    editTye: {
      type: Object,//1:新增，2：编辑
      required: true,
    },
    addType: {
      type: Object,
      required: true,
    },

  },
  watch: {
    rowData: function(newVal, oldVal) {

      this.searchData(newVal)
    }
  }
  ,
  data() {
    return {
      formName: null,
      formMap: {
        "add": "添加巡检记录",
        "edit": "编辑巡检记录"
      },
      BASE_URL: process.env.VUE_APP_BASE_API,
      headers: {},
      classesDisplay: false,
      selectedOptions: [],
      imgViewerVisible: false,
      imgList: [],
      options: regionDataPlus,
      inputQuery: {
        // customerId: null,
        devCodeFk: null,
        companyName: null,
        contacts: null,
        mobile: null,
        detailAddr: null
      },
      rules: {
        companyName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }
        ],
        creditNum: [
          {
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          }
        ],
        classes: [
          {
            required: true,
            message: '请选择企业类别',
            trigger: 'change'
          }
        ],
        area: [
          {
            required: true,
            message: '请选择所属地区',
            trigger: 'change'
          }
        ],
        detailAddr: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'change'
          }
        ],
        contacts: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'change'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'change'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'change'
          }
        ],
        updateCause: [
          {
            required: true,
            message: '请输入变更原因',
            trigger: 'change'
          }
        ]

      },
      uploadUrl: '',
      fileUrl: '',
      certFileUrl: '',
      url: 'http://127.0.0.1:9996/udiwms/image/register/file/getImage?type=image1&name=t11111.jpg',
      certQuery: {
        devCodeFk: '',
        page: 1,
        limit: 20,
        type: 1
      },
      expire: {
        0: '有效',
        1: '失效'
      },
      certList: [],
      certTotal: 0,
      certLoading: false,
      addCertVisible: false,
      salesmanQuery: {
        name: '',
        page: 1,
        limit: 20
      },
      salesmanList: [],
      salesmanTotal: 0,
      salesmanLoading: false,
      addSalesmanVisible: false,
      certTypeMap: {
        1: '身份证'
      },
      selectLocalVisible: false,
      productQuery: {
        ylqxzcrbarmc: '',
        cpmctymc: '',
        ggxh: '',
        page: 1,
        limit: 20
      },
      maintainsList: [],
      productList: [],
      productTotal: 0,
      productLoading: false,
      uuid: null,
      companyApplyUpdateVisible: false,
      companyEditDisabled: true,
      companyEditButtonStr: '编辑',
      addType: '1', //证书类型（1：资质证书；2：技术材料）
      filterQuery:{},
      checkFlag: {
        0: '草稿',
        1: '已通过',
        2: '已拒绝',
        3: '变更未审核',
        6: '未审核'
      },
      editTye: 1,

      selectCorpVisible: false,
      selectCertVisible: false,
      certType: 1,
      customerId: null

    }
  }
  ,
  methods: {
    searchData(query) {
      console.log('完成！')
      console.log(query)
      this.idQuery = { ...query }

      this.getDeviceCertList()

    },
    //预览照片
    showImgViewer(row) {
      this.certFileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
      this.imgList = []
      previewImage({ imageUrl: row.filePath, certFileUrl: this.certFileUrl }).then(response => {
        if (response.code === 20000) {
          this.imgList = response.data
        }
      })
      this.imgViewerVisible = true
      const m = (e) => {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, false) // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgViewerVisible = false
      const m = (e) => {
        e.preventDefault()
      }
      document.body.style.overflow = 'auto'
      document.removeEventListener('touchmove', m, true)
    },
    selectBasicCorp() {
      this.selectCorpVisible = true
    },
    cancelDialog() {
      this.closeDialog()
    },
    //关闭添加证书界面
    closeLocalDialog() {
      this.addCertVisible = false
      this.selectCertVisible = false
      // this.getCompanyCertList();
      this.getDeviceCertList()
    }
    ,
    //添加资质证书
    addCheck(row) {
      // console.log("this.inputQuery.devCodeFk",this.inputQuery.devCodeFk)
      if (isBlank(this.inputQuery.deviceCode)) {
        return this.$message.error('请先选择设备')
      }
      // console.log(this.inputQuery.devCodeFk)
      // console.log("dangqian hansg hsujv",row)
      if (this.$isNotBlank(row) && this.$isNotBlank(row.deviceCode)) {
        this.formName = "edit"
        this.inputQuery.formData = row
        this.editTye = 2
      } else {
        this.formName = "add"
        this.inputQuery.formData = {}
        this.inputQuery.formData.addType = 1
        this.editTye = 1
      }
      this.addCertVisible = true
    }
    ,
    //页数
    certHandleCurrentChange(val) {
      this.certQuery.page = val.page
      // this.getCompanyCertList();
      this.getDeviceCertList()
    },

    getDeviceCertList() {
      this.certLoading = true
      // let certRuery = {}
      // this.certQuery.customerId = this.inputEdit.customerId;
      // console.log('获取idQuery：')
      // console.log(this.idQuery)
      this.certQuery.deviceCode = this.idQuery.deviceCode
      this.certQuery.type = 1
      this.inputQuery = { ...this.idQuery }
      this.inputQuery.devCode = this.idQuery.devCode
      // console.log(this.inputQuery)
      // console.log('获取this.certQuery:')
      // console.log(this.certQuery)
      ///udi/device/checkRcord/filter
      filterDeviceCheck(this.certQuery)
        .then((response) => {
          this.certLoading = false
          this.certList = response.data.list || []
          this.certTotal = response.data.total
        })
        .catch(() => {
          this.certLoading = false
          this.certList = []
        })
    },

    deleteDeviceCert(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.certLoading = true
        let tquery = {
          id: row.id,
          filePath: row.filePath
        }
        deleteDeviceUser(tquery)
          .then((response) => {
            this.certLoading = false
            if (response.code === 20000) {
              this.getDeviceCertList()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
            } else {
              this.$message.error(response.message)
            }
          })
          .catch(() => {
            this.certLoading = false
          })
      }).catch(() => {
      })
    }
  }
  ,
  created() {
    // console.log("触发设备资质组件 idQuery",this.idQuery)
    // if (this.rowData.editType == 1) {
    // this.getDeviceCertList()
    // }
    // this.getBasicUnitMaintainsList();
    console.log("diidididiidiidid,",this.inputQuery)

    this.headers = {
      ADMINID: store.getters.adminId,
      ADMINTOKEN: store.getters.token
    }
    this.filterQuery = this.inputQuery
    console.log("fuzh fduzhi ",this.filterQuery)
  },
  components: {
    draggable, depUserAddDialog, corpMaintainSelect, supCertSetSelectDialog, ElImageViewer
  }
}

</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>
