<template>
  <div>
    <el-card class="el-card">
      <el-form :model="filterQuery" class="query-form" label-width="100px" v-show="showSearch">
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品编码:">
              <el-input v-model="filterQuery.code" placeholder="请输入产品编码/商品条码/医保编码" clearable
                   style="width: 90%"     @keyup.enter.native="keyupErp_submit($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称:">
              <el-input v-model="filterQuery.name" style="width: 90%" clearable placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格型号:">
              <el-input v-model="filterQuery.spec" style="width: 90%" clearable placeholder="请输入规格型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核状态:">
              <el-select v-model="filterQuery.checkStatus" style="width: 90%" placeholder="请选择审核状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="已审核" value="2"></el-option>
                <el-option label="未审核" value="1"></el-option>
                <el-option label="未通过" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="供应商:">
                <el-select
                  v-model="filterQuery.companyName"
                  filterable
                  remote
                  clearable="true"
                  reserve-keyword
                  style="width: 90%"
                  placeholder="请选择供应商"
                  :remote-method="findCompany"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in companyNames"
                    :key="item.companyName"
                    :label="item.companyName"
                    :value="item.companyName"
                  >
                    <span style="float: left">{{ item.companyName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>

      <div class="top-right-btn">
        <el-button-group style="display:flex;">
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </el-button-group>
      </div>

      <el-divider style="margin: 15px"></el-divider>

      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
        <el-table-column label="产品标识" prop="nameCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="产品名称" prop="cpmctymc" show-overflow-tooltip></el-table-column>
        <el-table-column label="规格型号" prop="ggxh" show-overflow-tooltip></el-table-column>
        <el-table-column label="医疗器械注册人" prop="ylqxzcrbarmc" show-overflow-tooltip></el-table-column>
        <el-table-column label="注册证编号" prop="zczbhhzbapzbh" show-overflow-tooltip></el-table-column>
        <el-table-column label="审核状态" prop="status" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ checkMap[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native.stop="detailDialog(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click.native.stop="deleteDialog(scope.row)" :disabled="scope.row.status==2">删除</el-button>
            <el-button type="text" size="small" :disabled="scope.row.status==2" @click="checDialog(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="handleCurrentChange"
      ></pagination>
    </el-card>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="产品信息详情"
      :visible.sync="thrProductsDetailVisible"
      width="60%"
      v-if="thrProductsDetailVisible"
    >
      <selectDiDetail :editQuery="thisData"></selectDiDetail>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="审核"
      :visible.sync="checkVisible"
      width="45%"
      v-if="checkVisible"
    >
      <el-form>
        <el-form-item>
          审核意见：
          <el-input type="text" v-model="remark" style="width: 50%" placeholder="请输入审核意见"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="checkVisible = false">取消</el-button>
          <el-button type="primary" @click="checkPass(2)">通过</el-button>
          <el-button type="primary" @click="checkPass(3)">不通过</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getThrDiProducts,
  delThrDiProducts,
  getDiProductDetail,
  updateDiProduct
} from '@/api/supplier/supProductsAddDi'
import selectDiDetail from '@/views/supplier/products/selectDIDetailDialog'
import ThrProductsAdd from '@/views/supplier/products/supProductsAdd'
import { filterCustomers } from '@/api/auth/customer'

export default {
  data() {
    return {
      showSearch: true,
      filterQuery: {
        code: null,
        name: '',
        spec: null,
        registerNo: null,
        manufactory: null,
        companyName: null,
        supId: null,
        page: 1,
        limit: 20
      },
      total: 0,
      list: [],
      uploadFileUrl: null,
      fileList: [],
      checkVisible: false,
      newType: 1,
      thrProductsDetailVisible: false,
      thisData: null,
      loading: false,
      checkMap: {
        1: '未审核',
        2: '已审核',
        3: '未通过'
      },
      companyNames: [],
      curRow: null,
      remark: null
    }
  },

  methods: {
    onReset() {
      this.$router.push({
        path: ''
      })
      this.filterQuery = {
        code: null,
        spec: null,
        registerNo: null,
        manufactory: null,
        name: '',
        companyName: null,
        page: 1,
        limit: 20
      }
      this.getList()
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    checDialog(row) {
      this.checkVisible = true
      this.remark = ''
      this.curRow = row
    },
    search() {
      this.filterQuery.page = 1
      this.getList()
    },
    getList() {
      this.loading = true
      getThrDiProducts(this.filterQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.list = response.data.list || []
            this.total = response.data.total || 0
          } else {
            this.$message.error(response.message)
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.list = []
          this.total = 0
        })
    },
    deleteDialog(row) {
      this.$confirm('此操作将永久删除该产品信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let dQuery = {
            id: row.id
          }
          delThrDiProducts(dQuery)
            .then((response) => {
              this.loading = false
              if (response.code == 20000) {
                this.$message.success('删除成功')
                this.getList()
              } else {
                this.$message.success(response.message)
              }
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch(() => {
        })
    },
    detailDialog(row) {
      let param = { uuid: row.uuid }
      getDiProductDetail(param).then((res) => {
        if (res.code === 20000) {
          this.thisData = res.data
          this.thrProductsDetailVisible = true
        }
      })
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page
      this.getList()
    },
    closeAddDialog() {
      this.addProductVisible = false
      Object.keys(this.newProductData).forEach(key => this.newProductData[key] = null)
    },
    checkPass(val) {
      let query = {
        id: this.curRow.id,
        status: val,
        uuid: this.curRow.uuid,
        customerId: this.curRow.customerId,
        remark: this.remark
      }
      updateDiProduct(query).then((res) => {
        if (res.code === 20000) {
          this.getList()
          this.checkVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.message)
        }
      }).catch((error) => {
        this.$message.error(error.message)
      })
    },
    findCompany(query) {
      this.companyNames = []
      let cQuery = {
        key: query
      }
      filterCustomers(cQuery).then((res) => {
        this.companyNames = res.data.list || []
      }).catch((error) => {
        this.companyNames = []
      })
    }
  },
  components: {
    ThrProductsAdd, selectDiDetail
  },
  mounted() {
  },
  created() {
    this.getList()
  }
}
</script>
