<template>
  <div class="app-container">
    <div class="filter-container">
      <div v-show="hasPerm('regenerate:update')" class="sub-navbar">
        <sticky>
          <el-button v-show="hasPerm('regenerate:update')" type="warning" @click="cleanRed">
            <svg-icon icon-class="clear" /> 消红
          </el-button>
        </sticky>
      </div>
      <el-form style="margin-top: 10px;">
        <el-form-item>
          <el-select
            v-model="listQuery.modelId"
            placeholder="模板"
            filterable
            clearable
            style="width: 200px"
            @change="handleFilter"
          >
            <el-option v-for="item in templates" :key="item.id" :label="item.tempName" :value="item.id" />
          </el-select>
          <el-input
            v-model="listQuery.baogaobianhao"
            placeholder="报告编号"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.zhucedaima"
            placeholder="注册代码"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.shiyongdengjibianhao"
            placeholder="使用登记证编号"
            clearable
            style="width: 350px"
            @keyup.enter.native="handleFilter"
          />
          <br>
          <span class="radio-group-label">消红状态：</span>
          <el-radio-group v-model="listQuery.updateState" @change="handleFilter">
            <el-radio :label="0">
              未消红
            </el-radio>
            <el-radio :label="1">
              已上传
            </el-radio>
            <el-radio :label="2">
              已消红
            </el-radio>
            <el-radio :label="3">
              消红失败
            </el-radio>
            <el-radio :label="-1">
              不可消红
            </el-radio>
            <el-radio :label="undefined">
              全部
            </el-radio>
          </el-radio-group>
          <el-button type="primary" size="small" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
          <el-button type="primary" size="small" icon="el-icon-search" @click="highQuery">
            高级查询
          </el-button>
          <el-button type="info" size="small" icon="el-icon-close" @click="clearQuery">
            清空条件
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="list"
      v-adaptive="{bottomOffset: 50}"
      height="0"
      :data="list"
      border
      fit
      highlight-current-row
      stripe
      width="100%"
      :row-style="formatterListRowStyle"
      @row-click="onRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column type="index" align="center" label="序号" width="50" />
      <el-table-column align="center" label="报告编号" prop="baogaobianhao" width="180" />
      <el-table-column :formatter="formatter.formatterCategory" align="center" label="检验类别" prop="neibuleibie" width="100" />
      <el-table-column align="center" label="使用登记证号" prop="shiyongdengjibianhao" width="180" />
      <el-table-column align="center" label="注册代码" prop="zhucedaima" width="180" />
      <el-table-column align="center" label="使用单位" prop="shiyongdanwei" min-width="240" />
      <el-table-column align="center" label="检验日期" prop="jianyanjieshuriqi" width="110" />
      <el-table-column align="center" label="下次检验日期" prop="xiacijianyanriqi" width="130" />
      <el-table-column align="center" label="检验结论" prop="jianyanjielun" width="120" />
      <el-table-column v-if="listQuery.updateState === undefined" fixed="right" align="center" label="消红状态" prop="updateState" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.updateState === -1" type="info">
            不可消红
          </el-tag>
          <el-tag v-else-if="scope.row.updateState === 0" type="danger">
            待消红
          </el-tag>
          <el-tag v-else-if="scope.row.updateState === 0" type="primary">
            已上传
          </el-tag>
          <el-tag v-else-if="scope.row.updateState === 2" type="success">
            成功
          </el-tag>
          <el-tag v-else-if="scope.row.updateState === 3" type="warning">
            失败
          </el-tag>
          <el-tag v-else type="info">
            未知
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showUpdateState" fixed="right" align="center" label="原因" prop="updateBeizhu" width="120" />
      <el-table-column fixed="right" align="center" label="操作" prop="" width="100">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.updateState !== -1"
            title="消红日志"
            circle
            size="small"
            @click="getJiekouList(scope.row.id)"
          >
            <svg-icon icon-class="update_log" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page-num.sync="listQuery.pageNum"
      :page-row.sync="listQuery.pageRow"
      @pagination="getList"
    />
    <!-- 高级查询窗口 -->
    <el-dialog :visible.sync="dialogQueryVisible" title="高级查询" width="60%">
      <el-container>
        <el-form :inline="true">
          <el-form-item label="检验类别:" style="width: 240px;">
            <el-select
              v-model="listQuery.neibuleibie"
              placeholder="请选择检验类别"
              style="width: 165px"
              clearable
              default-first-option
            >
              <el-option v-for="item in jylbList" v-show="item.parentId" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备种类:" style="width: 240px;">
            <el-select
              v-model="listQuery.shebeizhongleidaima"
              placeholder="请选择设备种类"
              style="width: 165px"
              clearable
              default-first-option
            >
              <el-option v-for="item in sbzlList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="检验人员:" style="width: 240px;">
            <el-select
              v-model="listQuery.jianyanrenyuan"
              placeholder="请选择检验人员"
              style="width: 165px"
              filterable
              clearable
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核人员:" style="width: 240px;">
            <el-select v-model="listQuery.shenheren" placeholder="请选择审核人员" style="width: 165px" filterable clearable>
              <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="审批人员:" style="width: 240px;">
            <el-select v-model="listQuery.shenpiren" placeholder="请选择审批人员" style="width: 165px" filterable clearable>
              <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="检验日期:" style="width: 240px;">
            <el-date-picker
              v-model="listQuery.jianyanjieshuriqi"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择检验日期"
              style="width: 165px"
            />
          </el-form-item>
          <el-form-item label="审核日期:" style="width: 240px;">
            <el-date-picker
              v-model="listQuery.shenheriqi"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择审核日期"
              style="width: 165px"
            />
          </el-form-item>
          <el-form-item label="审批日期:" style="width: 240px;">
            <el-date-picker
              v-model="listQuery.shenpiriqi"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择审批日期"
              style="width: 165px"
            />
          </el-form-item>
          <el-form-item label="下次检验日期:" style="width: 250px;">
            <el-date-picker
              v-model="listQuery.xiacijianyanriqi"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请输入日期"
              style="width: 145px"
            />
          </el-form-item>
          <el-form-item label="设备/产品名称:" style="width: 290px;">
            <el-input
              v-model="listQuery.shebeimingcheng"
              placeholder="请输入设备/产品名称"
              clearable
              style="width: 185px"
            />
          </el-form-item>
          <el-form-item label="制造单位:" style="width: 450px;">
            <el-input v-model="listQuery.zhizaodanwei" placeholder="请输入制造单位" style="width: 370px" />
          </el-form-item>
          <el-form-item label="使用登记证编号:" style="width: 350px;">
            <el-input
              v-model="listQuery.shiyongdengjibianhao"
              placeholder="请输入使用登记证编号"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="产品/出厂编号:" style="width: 290px;">
            <el-input v-model="listQuery.chanpinbianhao" placeholder="请输入产品编号" style="width: 185px" />
          </el-form-item>
        </el-form>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogQueryVisible = false">
          取 消
        </el-button>
        <el-button type="success" @click="handleFilter">
          查 询
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogJiekouVisoble" title="消红记录" width="80%">
      <el-table :data="jiekous" :row-style="formatterJiekousRowStyle">
        <el-table-column type="index" align="center" label="序号" width="50" />
        <el-table-column align="center" label="报告编号" prop="baogaobianhao" width="180" />
        <el-table-column align="center" label="检验类别" prop="jianyanleibie" width="100" />
        <el-table-column align="center" label="注册代码" prop="zhucedaima" width="180" />
        <el-table-column align="center" label="使用登记证号" prop="shiyongdengjibianhao" width="180" />
        <el-table-column align="center" label="检验日期" prop="jianyanriqi" width="110" />
        <el-table-column align="center" label="下次检验日期" prop="xiacijianyanriqi" width="130" />
        <el-table-column align="center" label="使用单位" prop="shiyongdanwei" min-width="240" />
        <el-table-column align="center" label="消红状态" prop="status" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '0'" type="danger">
              待消红
            </el-tag>
            <el-tag v-else-if="scope.row.status === '1'" type="success">
              成功
            </el-tag>
            <el-tag v-else-if="scope.row.status === '2'" type="warning">
              失败
            </el-tag>
            <el-tag v-else type="info">
              未知
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="消红失败原因" prop="beizhu" width="180" />
        <el-table-column align="center" label="上传日期" prop="shangchuanshijian" width="110" />
        <el-table-column align="center" label="消红日期" prop="gengxinshijian" width="130" />
        <el-table-column align="center" label="检验结论" prop="jianyanjielun" width="120" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
export default {
  name: 'HasDoneReport',
  components: { Sticky, Pagination },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        pageNum: 1, // 页码
        pageSize: 20, // 每页条数
        orderBy: 'shenpiriqi desc,id desc', // 排序字段
        updateState: 0

      },
      multipleSelection: [],
      dialogQueryVisible: false,
      sbzlList: [],
      jylbList: [],
      userList: [],
      dialogJiekouVisoble: false,
      jiekous: [],
      showUpdateState: false,
      templates: []
    }
  },
  watch: {
    'listQuery.updateState': function(val) {
      this.showUpdateState = val === undefined || val === 3
    }
  },
  created() {
    this.getList()
    this.getSbzlList()
    this.jylbList = this.$store.getters.allCategory
    this.userList = this.$store.getters.allUser
    this.getTemplateList()
  },
  methods: {
    formatterListRowStyle({ row }) {
      switch (row.updateState) {
        case -1:
          return 'color: #909399'
        case 0:
          return 'color: #F56C6C'
        case 1:
          return 'color: #409EFF'
        case 2:
          return 'color: #67C23A'
        case 3:
          return 'color: #E6A23C'
        default:
          return ''
      }
    },
    formatterJiekousRowStyle({ row }) {
      switch (row.status) {
        case '0':
          return 'color: #F56C6C'
        case '1':
          return 'color: #67C23A'
        case '2':
          return 'color: #E6A23C'
        default:
          return ''
      }
    },
    getTemplateList() {
      this.api({
        url: '/template/all',
        method: 'get',
        params: {
          bglx: 1,
          status: true,
          cleanState: true
        }
      }).then(data => {
        this.templates = data
      })
    },
    getJiekouList(ysjlId) {
      this.api({
        url: '/ysjl/getJiekouList',
        method: 'get',
        params: {
          ysjlId: ysjlId
        }
      }).then(data => {
        this.jiekous = data
        if (this.jiekous.length) {
          this.dialogJiekouVisoble = true
        } else {
          this.$message.warning('未查到该设备在省局接口更新信息！')
        }
      })
    },
    getList() {
      this.api({
        url: '/ysjl/getListEliminatingred',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.total = data.total
        this.$nextTick(() => {
          this.$refs.list.doLayout()
        })
      })
    },
    handleFilter() {
      // 查询事件
      this.listQuery.pageNum = 1
      this.dialogQueryVisible = false
      this.getList()
    },
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    getSbzlList() {
      this.api({
        url: '/sedirectory/getList',
        method: 'get',
        params: {
          sbzl: undefined,
          level: '1'
        }
      }).then(data => {
        this.sbzlList = data
      })
    },
    highQuery() {
      this.dialogQueryVisible = true
    },
    clearQuery() {
      this.listQuery = {
        bglx: 1,
        pageNum: 1, // 页码
        pageSize: 20, // 每页条数
        orderBy: 'shenpiriqi desc,id desc', // 排序字段
        updateState: 0
      }
      this.getList()
    },
    cleanRed() {
      this.api({
        url: '/ysjl/eliminatingRed',
        method: 'post',
        data: {
          ysjlIds: this.$refs.list.selection.map(row => row.id)
        }
      }).then(() => {
        this.$message.success('操作成功')
      })
    }
  }
}
</script>

<style scoped>
  .app-container {
    padding-top: 5px;
    padding-bottom: 0px;
  }
</style>
