<template>
  <div class="main-content market m20">
    <el-tabs v-model="type" class="tab-card" type="border-card" @tab-click="$refs.EasyTable.reset(); searchForm.regno=''">
      <el-tab-pane label="待检查业户" name="0" />
      <el-tab-pane label="历史记录" name="1" />
    </el-tabs>
    <searchHeader title="查询" />
    <div class="search-box">
      <el-row>
        <el-col :span="12" style="display:flex">
          <label class="label-name" style="width:260px;margin-right: 20px;line-height: 22px;">统一社会信用代码/注册号</label>
          <el-input
            v-model="searchForm.regno"
            size="mini"
            placeholder="请输入搜索统一社会信用代码/注册号"
            @keyup.native.enter="searchEnt"
          />
        </el-col>
        <el-col :span="10" style="display:flex">
          <label class="label-name" style="width:260px;margin-right: 20px;line-height: 22px;">主体名称</label>
          <el-input
            v-model="searchForm.entname"
            size="mini"
            placeholder="请输入主体名称"
            @keyup.native.enter="searchEnt"
          />
        </el-col>
        <el-col :span="2" />
      </el-row>
      <el-row>
        <el-col :span="10">
          <div v-if="type === '0'" class="btn-box">
            <el-button type="primary" icon="el-icon-search" size="mini" :loading="searchLoading" @click="$refs.EasyTable.reset()">查询</el-button>
            <el-button type="info" icon="el-icon-refresh-left" size="mini" @click="searchForm.regno = ''">重置</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addInspect">新建检查业户</el-button>
          </div>
          <div v-if="type === '1'" class="btn-box">
            <el-button type="primary" icon="el-icon-search" size="mini" :loading="searchLoading" @click="$refs.EasyTable.reset()">查询</el-button>
            <el-button type="info" icon="el-icon-refresh-left" size="mini" @click="searchForm.regno = ''">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-body ">
      <div class="content">
        <EasyTable
          ref="EasyTable"
          v-model="tableData"
          :table-config="tableConfig"
          :fields="dailySupervisionFields"
          :buttons="tableButtons"
          :total="tableTotal"
          :emit-current-change-on-create="true"
          @current-change="loadData"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="dailySupervisionInputDialog.visible"
      title="检查情况"
      width="80vw"
      :append-to-body="true"
      :modal-append-to-body="true"
      class="check"
    >
      <EasyForm
        ref="dailySupervisionInputDialog"
        v-model="dailySupervisionInputDialog.formData"
        v-loading="dailySupervisionInputDialog.loading"
        :fields="dailySupervisionFields"
        :form-config="dailySupervisionInputDialog.config"
        :buttons="dailySupervisionInputDialog.buttons"
        @cancel="dailySupervisionInputDialog.visible = false"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="searchResult.visible"
      title="待检查企业信息"
      width="500px"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="EasyForm"
    >
      <el-row :gutter="20" style="padding-bottom: 20px;" type="flex">
        <el-col :span="20" align="right">
          <label class="label-name" style="width:260px;margin-right: 20px;line-height: 22px;">统一码/注册号:</label>
          <el-input
            v-model="searchForm.regno"
            style="width: 60%"
            size="mini"
            placeholder="请输入统一码/注册号"
            @keyup.native.enter="searchEnt"
          />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEnt">查询</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-bottom: 20px" type="flex">
        <el-col :span="20" align="right">
          <label class="label-name" style="width:260px;margin-right: 20px;line-height: 22px;">主体名称:</label>
          <el-input
            v-model="entname1"
            style="width: 60%"
            size="mini"
            placeholder="请输入主体名称"
            @keyup.native.enter="searchEnt"
          />
        </el-col>
        <el-col :span="4" />
      </el-row>
      <el-form label-width="140px" class="EasyForm">
        <el-row>
          <el-col>
            <el-form-item label="统一码/注册号: ">
              {{ searchResult.entInfo.uniscid || searchResult.entInfo.regno }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="主体名称: ">
              {{ searchResult.entInfo.entname }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="法定代表人/负责人: ">
              {{ searchResult.entInfo.name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="住址: ">
              {{ searchResult.entInfo.dom }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col>
          <div style="text-align: center;margin-top: 10px;">
            <el-button :loading="addLoading" type="primary" @click="addTodo(searchResult.entInfo)">添加到待检查列表</el-button>
            <el-button @click="searchResult.visible = false">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import EasyTable from '../../../components/EasyTable'
import EasyForm from '../../../components/EasyForm'
import searchHeader from '@/components/searchHeader'
import { listEntInfo, sueInspectUpdate, sueInspectList, sueInspectSave, removeTSSueInspect } from '@/api/market'
import dailySupervisionBase from '@/views/market/dailysupervision/index'

export default {

  name: 'DailySupervision',
  components: {
    EasyTable,
    EasyForm,
    searchHeader
  },
  mixins: [dailySupervisionBase],
  data() {
    return {
      entname1: '',
      searchForm: {
        regno: '',
        entname: ''
      },
      type: '0',
      searchLoading: false,
      addLoading: false,
      currentId: '', // 当前检查任务Id
      tableTotal: 0,
      tableData: [],
      user: JSON.parse(sessionStorage.getItem('user')),
      tableConfig: {
        showIndex: true,
        showPagination: true,
        tableProps: {
          border: true,
          headerCellStyle: { background: '#8cc3fb', color: '#fff' }
        }
      },
      tableButtons: [
        {
          label: '录入',
          type: 'text',
          loading: false,
          show: () => {
            return this.type === '0'
          },
          disabled: false,
          position: 'row', // header | row
          handler: (scope, button, easyTableInstance) => {
            this.dailySupervisionInputDialog.config.readOnly = false
            this.dailySupervisionEvent(scope, button, easyTableInstance)
          }
        },
        {
          label: '删除',
          type: 'text',
          loading: false,
          show: () => {
            return this.type === '0'
          },
          disabled: false,
          position: 'row',
          handler: (scope) => {
            this.$confirm(`请确认是否删除 ${scope.row.entName} 检查任务`, '提示', {
              type: 'warning',
              callback: (action) => {
                if (action === 'confirm') {
                  removeTSSueInspect(scope.row.id).then(res => {
                    if (res.code === 0) {
                      this.$message.success('操作成功')
                      this.$refs.EasyTable.reset(1)
                    } else {
                      this.$message.error(res.msg)
                    }
                  })
                }
              }
            })
          }
        },
        {
          label: '打印检查表',
          type: 'text',
          loading: false,
          show: () => {
            return this.type === '0'
          },
          disabled: false,
          position: 'row', // header | row
          handler: (scope, button, easyTableInstance) => {
            window.open(`${process.env.VUE_APP_BASE_API}/market/sueInspect/createInspectDoc?id=${scope.row.id}`, '_blank')
          }
        },
        {
          label: '查看',
          type: 'text',
          loading: false,
          show: () => {
            return this.type !== '0'
          },
          disabled: false,
          position: 'row', // header | row
          handler: (scope, button, easyTableInstance) => {
            this.dailySupervisionInputDialog.config.readOnly = true
            this.dailySupervisionEvent(scope, button, easyTableInstance)
          }
        }
      ],
      dailySupervisionInputDialog: {
        config: {
          labelPosition: 'right',
          labelWidth: '130px',
          // gutter: 20,
          readOnly: false,
          submitPosition: 'center', // 页脚按钮位置
          showValidMessage: true
        },
        buttons: [
          {
            label: '保存',
            type: 'primary',
            loading: false,
            show: (scope) => {
              return !scope.formConfig.readOnly
            },
            handler: (formData, button, easyFormInstance) => {
              easyFormInstance.submitForm().then((parseFormData) => {
                this.updateInspect(parseFormData, button, easyFormInstance)
              })
            }
          },
          {
            label: '关闭',
            loading: false,
            show: (scope) => {
              return !scope.formConfig.readOnly
            },
            handler: (formData, button, easyFormInstance) => {
              this.dailySupervisionInputDialog.visible = false
            }
          }
        ]
      },
      searchResult: {
        visible: false,
        entInfo: {}
      }
    }
  },
  computed: {
    _currentId() {
      return this.currentId
    }
  },
  created() {
  },
  methods: {
    addInspect() {
      this.searchResult.visible = true
      this.searchResult.entInfo = {}
    },
    searchEnt() {
      if (!this.searchForm.regno && !this.entname1) {
        return
      }
      this.searchLoading = true
      listEntInfo({
        paramMap: {

        },
        customParamMap: {
          entname: this.isNotBlank(this.entname1) ? this.entname1 : '',
          regno: this.searchForm.regno,
          limitArea: '1'
        },
        pageSize: 10,
        curPage: 1
      }).then((res) => {
        if (res.code !== 0) {
          throw res
        }
        if (res.data.total !== 1) {
          this.$message.error('没有在管理片区下找到该企业信息')
          return
        }
        const entInfo = res.data.records[0]
        return sueInspectList({
          paramMap: {
            regNo: entInfo.regno,
            uscc: entInfo.uniscid
          },
          customParamMap: {
            type: '0'
          },
          pageSize: 10,
          curPage: 1
        }).then((res) => {
          if (res.code !== 0) {
            throw res
          }
          if (res.data.total !== 0) {
            this.$message.error('业户已被列入抽查列表')
            return
          }
          this.searchResult.visible = true
          this.searchResult.entInfo = entInfo
        })
      }).finally(() => {
        this.searchLoading = false
      })
    },
    loadData({ pageParam, instance }) {
      instance.loading = true
      sueInspectList({
        'curPage': pageParam.current,
        'customParamMap': {
          type: this.type, // 0-待检查 1-已检查
          inspectOrg: this.user.orgId
        },
        'inParamMap': {},
        'likeParamMap': {},
        'pageSize': pageParam.size,
        'paramMap': {
          regNo: this.searchForm.regno.length === 18 ? undefined : (this.searchForm.regno ? this.searchForm.regno : undefined),
          uscc: this.searchForm.regno.length === 18 ? this.searchForm.regno : undefined,
          entname: this.isNotBlank(this.searchForm.entname) ? this.searchForm.entname : undefined
        }
      }).then((res) => {
        const { code, data } = res
        if (code === 0) {
          this.tableData = data.records
          this.tableTotal = data.total
        }
      }).finally(() => {
        instance.loading = false
      })
    },
    isNotBlank(val) {
      if (val === undefined || val === null || val === '') {
        return false
      }
      return true
    },
    addTodo(entInfo) {
      if (entInfo.entname === null || entInfo.entname === undefined || entInfo.entname === '') {
        this.$message.error('请先查询主体')
        return
      }
      this.addLoading = true
      sueInspectSave({
        regNo: entInfo.regno,
        priPId: entInfo.pripid,
        entName: entInfo.entname,
        legalName: entInfo.name,
        dom: entInfo.dom,
        uscc: entInfo.uniscid,
        inspectOrgName: JSON.parse(sessionStorage.user).orgName,
        inspectOrg: JSON.parse(sessionStorage.user).orgId,
        inspector: JSON.parse(sessionStorage.user).nickname,
        inspectorId: JSON.parse(sessionStorage.user).primaryKey
      }).then(() => {
        this.searchResult.visible = false
        this.searchForm.regno = ''
      }).finally(() => {
        this.addLoading = false
        this.$refs.EasyTable.reset()
      })
    },
    updateInspect(parseFormData, button, easyFormInstance) {
      // 录入检查
      button.loading = true
      sueInspectUpdate({
        ...parseFormData
      }).then((res) => {
        const { code } = res
        if (code !== 0) {
          throw res
        }
      }).then(() => {
        this.dailySupervisionInputDialog.visible = false
        this.$refs.EasyTable.reset()
      }).catch((res) => {
        console.log(res)
        this.$message.error('提交失败')
      }).finally(() => {
        button.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  background: #fff;
  >div:not(:first-child){
      margin-top:16px;
  }
  .btn-box{

  }
  .main-body{
      padding:16px 0;
      .header{
          .header-label{
              font-size: 20PX;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: bold;
              color: #243668;
              line-height: 32px;
          }
      }
  }

}
.search-box{
  background:#fff;
  padding: 0 10px;
  .el-row{
    margin-bottom: 10px;
  }
  .search-field{
      display:inline-block;
      width:80%;
      >p{
          margin:0 0 10px 0;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          color: #5e5e7a;
          font-size:16PX;
      }
  }
}
.label-name{
  font-size: $table-content-font-size;
  text-align: right;
}
/deep/.el-form-item .el-form-item__label{
  background: #eaf4fe!important;
}
</style>

