<template>
  <div>
    <el-card>
      <div>
        <p class="form-title">配送企业资质设置</p>
      </div>
      <div style=" float: right; text-align: right; margin-bottom: 8px;">
        <el-button type="primary" size="mini" icon="search" @click="addCert" style="text-align:right">添加设置
        </el-button>
      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="证书名称" prop="name"></el-table-column>
        <el-table-column label="是否必传" prop="require" s>
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.need] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明" prop="remark"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
            >编辑
            </el-button>

            <el-button
              type="text"
              size="small"
              @click="handleDel( scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="handleCurrentChange"
      ></pagination>

      <el-dialog
        :title="formMap[formName]"
        :visible.sync="addDialogVisible"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addDialogVisible"
      >

        <el-form :model="currentSup" :rules="formRules" label-width="100px" ref="dataForm">
          <el-row>
            <el-col :span="11">
              <el-form-item label="证书名称:" prop="name">
                <el-input v-model="currentSup.name" style="width: 90%" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="是否必传:" prop="need">
                <el-select style="width: 90%" v-model="currentSup.need">
                  <el-option label="是" :value=true></el-option>
                  <el-option label="否" :value=false></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="说明:" prop="remark">
                <el-input v-model="currentSup.remark" style="width: 95.5%" auto-complete="off" type="textarea"
                          autosize
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" size="small" icon="search" @click="onAddSubmit" :loading="addLoading"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>

      </el-dialog>

    </el-card>

    <el-card>
      <div>
        <p class="form-title">生产企业资质设置</p>
      </div>
      <div style=" float: right;
                        text-align: right;
                        margin-bottom: 8px;"
      >
        <el-button type="primary" size="mini" icon="search" @click="addManufacturerCert" style="text-align:right">
          添加设置
        </el-button>
      </div>

      <el-table v-loading="loading" :data="manufacturerList" style="width: 100%" border highlight-current-row>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="证书名称" prop="name"></el-table-column>
        <el-table-column label="产地" prop="foreign">
          <template slot-scope="scope">
            <span>{{ foreignMap[scope.row.foreign] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明" prop="remark"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleManufacturerEdit( scope.row)"
            >编辑
            </el-button>

            <el-button
              type="text"
              size="small"
              @click="handleManufacturerDel( scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="manufacturerTotal>0"
        :total="manufacturerTotal"
        :page.sync="manufacturerQuery.page"
        :limit.sync="manufacturerQuery.limit"
        @pagination="handleManufacturerChange"
      ></pagination>

      <el-dialog
        :title="formManufacturerMap[formManufacturerName]"
        :visible.sync="addManufacturerDialogVisible"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addManufacturerDialogVisible"
        :isShow="false"
      >

        <el-form :model="currentManufacturer" label-width="100px" :rules="formManufactureRules"
                 ref="dataManufacturerForm"
        >
          <el-row>
            <el-col :span="11">
              <el-form-item label="证书名称:" prop="name">
                <el-input v-model="currentManufacturer.name" auto-complete="off" :disabled="currentManufacturer.need"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="产地:" prop="foreign">
                <el-select v-model="currentManufacturer.foreign" style="width: 100%"
                           :disabled="currentManufacturer.need"
                >
                  <el-option label="全部" :value="1"></el-option>
                  <el-option label="国外" :value="2"></el-option>
                  <el-option label="国内" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11" v-if="isShow">
              <el-form-item label="是否禁用:" prop="need">
                <el-select v-model="currentManufacturer.need" style="width: 100%">
                  <el-option label="是" :value=true></el-option>
                  <el-option label="否" :value=false></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="说明:" prop="remark">
                <el-input v-model="currentManufacturer.remark" auto-complete="off" type="textarea"
                          autosize
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" size="small" icon="search" @click="onAddManufacturerSubmit" :loading="onAddManufacturerSubmitLoading"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>

      </el-dialog>

    </el-card>

    <el-card>
      <div>
        <p class="form-title">产品资质设置</p>
      </div>
      <div style="float:right;
                        text-align: right;
                        margin-bottom: 8px;"
      >
        <el-button type="primary" size="mini" icon="search" @click="addProductCert" style="text-align:right">添加设置
        </el-button>
      </div>

      <el-table v-loading="productLoading" :data="productList" style="width: 100%" border highlight-current-row>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="证书名称" prop="name"></el-table-column>
        <el-table-column label="产地" prop="imports">
          <template slot-scope="scope">
            <span>{{ foreignMap[scope.row.imports] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品类型" prop="cplx">
        </el-table-column>
        <el-table-column label="产品类别" prop="hchzsb">
        </el-table-column>

        <el-table-column label="分类编码" prop="flbm">
        </el-table-column>

        <el-table-column label="说明" prop="remark"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleProductEdit( scope.row)"
            >编辑

            </el-button>

            <el-button
              type="text"
              size="small"
              @click="handleProductDel( scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="productTotal>0"
        :total="productTotal"
        :page.sync="productQuery.page"
        :limit.sync="productQuery.limit"
        @pagination="handleProductChange"
      ></pagination>


      <el-dialog
        :title="formProductMap[formProductName]"
        :visible.sync="addProductDialogVisible"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addProductDialogVisible"
        :isShow="false"
      >

        <el-form :model="currentProduct" label-width="100px" :rules="formRules" ref="dataForm">
          <el-row>
            <el-col :span="11">
              <el-form-item label="证书名称" prop="name">
                <el-input v-model="currentProduct.name" style="width: 90%" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11" v-if="isShow">
              <el-form-item label="是否禁用:" prop="need">
                <el-select v-model="currentProduct.need" style="width: 90%">
                  <el-option label="禁用" :value=true></el-option>
                  <el-option label="启用" :value=false></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="11">
              <el-form-item label="产品类型：" prop="require">
                <el-select v-model="currentProduct.cplx" style="width: 90%">
                  <el-option label="全部" key="全部" value="全部"></el-option>
                  <el-option label="器械" key="器械" value="器械"></el-option>
                  <el-option label="试剂" key="试剂" value="试剂"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="产品类别：" prop="require">
                <el-select v-model="currentProduct.hchzsb" style="width: 90%">
                  <el-option label="全部" value="全部"></el-option>
                  <el-option label="耗材" value="耗材"></el-option>
                  <el-option label="设备" value="设备"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="产地：" prop="imports">
                <el-select v-model="currentProduct.imports" style="width: 90%">
                  <el-option label="全部" value="1"></el-option>
                  <el-option label="国外" value="2"></el-option>
                  <el-option label="国内" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="说明：" prop="remark">
                <el-input v-model="currentProduct.remark" style="width: 90%" auto-complete="off" type="textarea"
                          autosize
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="分类编码：" prop="require">
                <el-select
                  v-model="currentProduct.flbmList"
                  filterable
                  remote
                  clearable="true"
                  style="width: 90%"
                  multiple
                  reserve-keyword
                  placeholder="请选择"
                  :remote-method="classifySearch"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in classifyList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                    <span>{{ item.code }}</span>
                    <span>{{ item.name }}</span>
                  </el-option>
                </el-select>


              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" size="small" icon="search" @click="onAddProductSubmit" :loading="scertLoading"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>

      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { filterCertSet, delSupCertCert, modifySupCertSet, addSupCertSet } from '@/api/purchase/supCertSet'
import { filterClassify } from '@/api/purchase/classifyCode'

export default {
  data() {
    return {
      /**--------配送企业资质设置--------------*/
      query: {
        type: 1,
        page: 1,
        limit: 20
      },
      list: [],
      total: 0,
      loading: false,
      enableMap: {
        true: '是',
        false: '否'
      },
      addDialogVisible: false,
      currentSup: {},
      formName: 'add',
      formMap: {
        add: '新增配送企业资质设置',
        update: '编辑配送企业资质设置'
      },

      formRules: {
        name: [
          { required: true, message: '证书名称', trigger: 'blur' }
        ],
        need: [
          { required: true, message: '是否必传', trigger: 'blur' }
        ]

      },

      /**--------生产企业资质设置  --------------*/
      manufacturerList: [],
      manufacturerQuery: {
        type: 2,
        page: 1,
        limit: 20
      },
      statusMap: {
        true: '禁用',
        false: '启用'
      },
      foreignMap: {
        '1': '全部',
        '2': '国外',
        '3': '国内'

      },
      manufacturerTotal: 0,
      manufacturerLoading: false,
      addManufacturerDialogVisible: false,
      currentManufacturer: {},
      formManufacturerName: 'add',
      formManufacturerMap: {
        add: '新增生产企业资质设置',
        update: '编辑生产企业资质设置'
      },

      formManufactureRules: {
        name: [
          { required: true, message: '请输入证书名称', trigger: 'blur' }
        ]

      },

      /**--------产品资质设置--------------*/
      productList: [],
      productQuery: {
        type: 3,
        page: 1,
        limit: 20
      },
      productTotal: 0,
      productLoading: false,
      addProductDialogVisible: false,
      currentProduct: {},
      formProductName: 'add',
      formProductMap: {
        add: '新增产品资质设置',
        update: '编辑产品资质设置'
      },

      classifyList: [],
      mutilData: [],
      inputKey: null,
      addLoading: false,
      onAddManufacturerSubmitLoading: false,
      scertLoading: false,

    }
  },
  methods: {

    /**--------配送企业资质设置--------------*/
    handleCurrentChange(val) {
      this.query.page = val.page
      this.getList()
    },
    getList() {
      this.loading = true
      filterCertSet(this.query)
        .then(response => {
          this.loading = false
          this.list = response.data.list || []
          this.total = response.data.total || 0
        })
        .catch(() => {
          this.loading = false
          this.list = []
          this.total = 0
        })
    },

    handleEdit(row) {
      this.formName = 'update'
      this.currentSup = row
      this.addDialogVisible = true

    },
    handleDel(row) {
      let query = {
        id: row.id
      }
      delSupCertCert(query)
        .then((response) => {
          this.getList()
        })
        .catch(() => {
        })
    },
    addCert() {
      this.formName = 'add'
      this.currentSup = {}
      this.addDialogVisible = true
    },
    onAddSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.addDialogVisible = false
          this.addLoading = true
          if (this.formName == 'add') {
            this.currentSup.type = 1
            addSupCertSet(this.currentSup)
              .then((response) => {
                this.addLoading = false
                if (response.code == 20000) {
                  this.getList()
                } else {
                  this.$message.error(response.message)
                }
              })
              .catch(() => {
              })
          } else {
            modifySupCertSet(this.currentSup).then((res) => {
              this.addLoading = false
              if (res.code == 20000) {
                this.getList()
                this.$message.success('保存成功！')
              } else {
                this.getList()
                this.$message.error(res.message)
              }
            })
          }
        }
      })

    },
    cancelDialog() {
      this.getList()
      this.getManufacturerList()
      this.getProductList()
      this.addDialogVisible = false
      this.addManufacturerDialogVisible = false
      this.addProductDialogVisible = false
    },

    /**--------生产企业资质设置--------------*/
    handleManufacturerChange(val) {
      this.manufacturerQuery.page = val.page
      this.getManufacturerList()
    },
    getManufacturerList() {
      this.manufacturerLoading = true
      filterCertSet(this.manufacturerQuery)
        .then(response => {
          this.manufacturerLoading = false
          this.manufacturerList = response.data.list || []
          this.manufacturerTotal = response.data.total || 0
        })
        .catch(() => {
          this.manufacturerLoading = false
          this.manufacturerList = []
          this.manufacturerTotal = 0
        })
    },
    handleManufacturerEdit(row) {
      this.formManufacturerName = 'update'
      this.currentManufacturer = row
      this.addManufacturerDialogVisible = true

    },
    handleManufacturerDel(row) {
      let query = {
        id: row.id
      }
      delSupCertCert(query)
        .then((response) => {
          this.getManufacturerList()
        })
        .catch(() => {
        })
    },
    addManufacturerCert() {
      this.formManufacturerName = 'add'
      this.currentManufacturer = {}
      this.addManufacturerDialogVisible = true
    },
    onAddManufacturerSubmit() {

      this.$refs['dataManufacturerForm'].validate(valid => {
        if (valid) {
          this.addManufacturerDialogVisible = false
          this.onAddManufacturerSubmitLoading = true
          if (this.formManufacturerName == 'add') {
            this.currentManufacturer.type = 2
            addSupCertSet(this.currentManufacturer)
              .then((response) => {
                this.onAddManufacturerSubmitLoading = false
                if (response.code == 20000) {
                  this.getManufacturerList()
                } else {
                  this.$message.error(response.message)
                }

              })
              .catch(() => {
              })
          } else {
            modifySupCertSet(this.currentManufacturer).then((res) => {
              this.onAddManufacturerSubmitLoading = false
              if (res.code == 20000) {
                this.getManufacturerList()
                this.$message.success('保存成功！')
              } else {
                this.getManufacturerList()
                this.$message.error(res.message)
              }
            })
          }
        }
      })

    },

    /**--------产品资质设置--------------*/
    handleProductChange(val) {
      this.productQuery.page = val.page
      this.getProductList()
    },
    getProductList() {
      this.productLoading = true
      filterCertSet(this.productQuery)
        .then(response => {
          this.productLoading = false
          this.productList = response.data.list || []
          this.productTotal = response.data.total || 0
        })
        .catch(() => {
          this.productLoading = false
          this.productList = []
          this.productTotal = 0
        })
    },
    handleProductEdit(row) {
      this.formProductName = 'update'
      this.currentProduct = row
      if (row.imports == '1') {
        this.currentProduct.imports = '全部'
      } else if (row.imports == '2') {
        this.currentProduct.imports = '国外'
      } else if (row.imports == '3') {
        this.currentProduct.imports = '国内'
      }
      this.addProductDialogVisible = true

      this.classifyFirstSearch(this.currentProduct.flbm)

    },
    handleProductDel(row) {
      let query = {
        id: row.id
      }
      delSupCertCert(query)
        .then((response) => {
          this.getProductList()
        })
        .catch(() => {
        })
    },
    addProductCert() {
      this.formProductName = 'add'
      this.currentProduct = {}
      this.addProductDialogVisible = true
    },
    onAddProductSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.addProductDialogVisible = false
          this.scertLoading = true
          if (this.formProductName == 'add') {
            this.currentProduct.type = 3
            addSupCertSet(this.currentProduct)
              .then((response) => {
                this.scertLoading = false
                if (response.code == 20000) {
                  this.getProductList()
                } else {
                  this.$message.error(response.message)
                }
              })
              .catch(() => {
                this.scertLoading = false
              })
          } else {
            modifySupCertSet(this.currentProduct).then((res) => {
              this.scertLoading = false
              if (res.code == 20000) {
                this.getProductList()
                this.$message.success('保存成功！')
              } else {
                this.getProductList()
                this.$message.error(res.message)
              }
            })
          }
        }
      })

    },

    classifyFirstSearch(key) {
      let query = {
        inFilter: key
      }
      filterClassify(query)
        .then(response => {
          this.loading = false
          this.classifyList = response.data.list || []
        })
        .catch(() => {
          this.loading = false
          this.classifyList = []
        })
    },

    classifySearch(key) {
      let query = {
        key: key
      }
      filterClassify(query)
        .then(response => {
          this.loading = false
          this.classifyList = response.data.list || []
        })
        .catch(() => {
          this.loading = false
          this.classifyList = []
        })
    }
  },
  filters: {},
  mounted() {
  },
  created() {
    // 加载表格数据
    this.getList()
    this.getManufacturerList()
    this.getProductList()
  }
}
</script>

<style scoped
>
.form-title {
  font-size: 16px;
  font-family: Noto Sans SC;
  font-weight: bold;
  color: #303133;
}
</style>

