<template>
  <!-- 入户安全 -->
  <div>
    <actionBar menuTitle="入户安全" :formList="formList" :ruleForm="searchRuleForm" @searchProtocol="searchProtocol">
    </actionBar>
    <tables :key="Math.random()" :suspension="false" :tableList="tableList" :tableData="tableData"
      @buttonData="buttonData"></tables>
    <!-- 分页 -->
    <div class="paging_bottom" v-if="Total">
      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
        @changeCurrent="changeCurrent">
      </pagination>
    </div>
    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="80%" :close-on-click-modal="false">
      <forms-safety :operationType="operationType" :checkEntry="checkEntry" :formRuleList="formRuleList"
        :ruleForm="ruleForm"></forms-safety>
      <span slot="footer" class="dialog-footer" v-if="operationType == 'edit'">
        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getInspectRecord,
    putInspectRecord
  } from '@/api/security'
  import actionBar from '@/components/actionBar'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  import formsSafety from '@/components/formsSafety'
  import {
    formRules,
    employee
  } from "./client.js";
  import {
    check
  } from '@/assets/js/announcements'
  export default {
    components: {
      actionBar,
      tables,
      pagination,
      formsSafety
    },
    data() {
      return {
        staffTitle: '添加',
        staffDialogVisible: false,
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        formList: [{
          type: 'input',
          label: '客户姓名',
          field: 'customerName',
          placeholder: '客户姓名',
        }],
        searchRuleForm: {
          customerName: '',
        },
        tableList: employee(),
        tableData: [],
        Total: 0,
        formRuleList: [],
        operationType: '',
        searchValue: {},
        checkEntry: [],
        ruleForm: {
          fileList: [],
        },
        confirmLoading: false,
        orderId: '',
      }
    },
    mounted() {
      this.checkEntry = check()
      const dataList = formRules();
      this.formRuleList = dataList;
      this.getList()
    },
    methods: {
      // 搜索
      searchProtocol(value) {
        this.searchValue = value
        this.getList()
      },
      // 获取入户安全检查列表
      getList() {
        var params = {
          page: this.Pagination.PageIndex,
          pageSize: this.Pagination.PageSize,
          ...this.searchValue
        }
        getInspectRecord(params).then(res => {
          // console.log(res,32)
          if (res.code == 200) {
            this.tableData = res.data.list
            this.Total = res.data.count
          }
        })
      },
      async handleAdd() {
        var params = {
          afterRectifyImg: this.picture(this.ruleForm.fileList),
          remark: this.ruleForm.remark,
          state: this.ruleForm.state,
          inspectExpandList: []
        }
        this.checkEntry.forEach(item => {
          var arr = {
            inspectItem: item.id,
            itemCode: item.value,
          }
          params.inspectExpandList.push(arr)
        })
        if (this.operationType == 'edit') {
          this.confirmLoading = true
          await putInspectRecord({
            id: this.orderId,
            ...params
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.getList()
              this.staffDialogVisible = false
            }
            this.confirmLoading = false
          })
        }
      },
      picture(arr) {
        var imgList = JSON.parse(JSON.stringify(arr))
        var imgArr = []
        imgList.forEach((item, index) => {
          var urlil = this.$baseUrl
          item.url = item.url.replace(urlil, "")
          imgArr.push(item.url)
        })
        var imgString = imgArr.join()
        return imgString
      },
      buttonData(row, type) {
        this.orderId = row.id
        this.operationType = type
        if (type == 'edit') {
          this.staffTitle = '编辑'
          if (row.afterRectifyImg) {
            var arr = row.afterRectifyImg.split(',')
            var arr3 = []
            arr.forEach((item, index) => {
              var arr1 = {
                url: '',
              }
              arr1.url = this.$baseUrl + item
              arr3.push(arr1)
            })
            this.ruleForm.fileList = arr3
          }
        } else {
          this.staffTitle = '详情'
          this.pictureMatching('homeCheckImg', row.homeCheckImg)
          this.pictureMatching('signImg', row.signImg)
          this.pictureMatching('beforeRectifyImg', row.beforeRectifyImg)
          this.pictureMatching('afterRectifyImg', row.afterRectifyImg)
        }
        this.$set(this.ruleForm, 'state', row.state)
        this.$set(this.ruleForm, 'remark', row.remark)
        this.$set(this.ruleForm, 'name', row.customer.name)
        this.$set(this.ruleForm, 'nickName', row.user.nickName)
        this.checkEntry.forEach((item, index) => {
          let arr = row.inspectExpandList
          arr.forEach((item1, index1) => {
            if (item.id == item1.inspectItem) {
              item.value = item1.itemCode
            }
          })
        })
        this.staffDialogVisible = true
      },
      // 匹配图片
      pictureMatching(type, value) {
        this.formRuleList.forEach((item, index) => {
          if (item.field == type) {
            if (value) {
              var arr = value.split(',')
              item.options = arr
            } else {
              item.options = []
            }
          }
        })
      },
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList()
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    margin-top: 8vh !important;
  }
</style>
