<template>
  <div class="main-container-text">
    <div class="title">禁忌属性关系</div>
    <div class="header">
      <el-input v-model="name" clearable placeholder="请输入名称" />
      <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button icon="el-icon-edit" @click="handleAdd">新增关系</el-button>
      <el-button icon="el-icon-edit" @click="handleEdit">编辑关系</el-button>
      <div class="header-right">
        <el-button icon="el-icon-delete" circle @click="handleDel" />
        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      stripe
      element-loading-text="拼命加载中"
      :header-cell-style="headerStyle"
      height="69vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        align="center"
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column
        prop="name1"
        show-overflow-tooltip
        label="试剂属性1"
        align="center"
      />
      <el-table-column
        prop="name2"
        show-overflow-tooltip
        label="试剂属性2"
        align="center"
      />
      <el-table-column
        prop="relation"
        show-overflow-tooltip
        label="关系"
        align="center"
      />
      <el-table-column
        prop="description"
        show-overflow-tooltip
        label="说明"
        align="center"
      />
    </el-table>
    <div class="my-pagination" style="text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="total"
        :page-size.sync="page_size"
        :disabled="loading"
        @current-change="pageChange"
      />
    </div>
    <el-dialog :title="formTitle" :visible.sync="formVisible" @close="onClose">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="93px">
        <el-form-item label="试剂属性1" prop="name1">
          <el-input v-model="formData.name1" placeholder="请输入试剂属性1" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="试剂属性2" prop="name2">
          <el-input v-model="formData.name2" placeholder="请输入试剂属性2" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="关系提示" prop="relation">
          <el-input v-model="formData.relation" placeholder="请输入关系提示" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            placeholder="请输入说明"
            :autosize="{minRows: 4, maxRows: 4}"
            :style="{width: '100%'}"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelAddConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  relation_del,
  relation_get, relation_update_add
} from '@/api/reagent/management'
import stringify from '@/utils/stringify'
export default {
  name: 'Management',
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 0,
      headerStyle: { 'background': '#E6E6E6' },
      name: null,
      multipleSelection: [],
      tableData: [],
      loading: true,

      formVisible: false,
      formTitle: undefined,
      formData: {
        id: undefined,
        name1: undefined,
        name2: undefined,
        relation: undefined,
        description: undefined
      },
      rules: {
        name1: [{
          required: true,
          message: '请输入试剂属性1',
          trigger: 'blur'
        }],
        name2: [{
          required: true,
          message: '请输入试剂属性2',
          trigger: 'blur'
        }],
        relation: [{
          required: true,
          message: '请输入关系提示',
          trigger: 'blur'
        }],
        description: undefined
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取试剂列表
    getList() {
      this.loading = true
      const data = {
        page: this.page,
        page_size: this.page_size,
        seach_word: this.name
      }
      relation_get(stringify(data)).then(res => {
        this.tableData = res.data.data_list
        this.total = res.data.total_count
      }).finally(() => { this.$refs['table'].doLayout(); this.loading = false })
    },
    handleDel() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择一个试剂类目！')
        return
      }
      this.$confirm('此操作将永久删除该试剂, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id_list: JSON.stringify(this.multipleSelection.map(item => item.id))
        }
        relation_del(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAdd() {
      this.formVisible = true
      this.formTitle = '新增试剂类别'
    },
    close() {
      this.formVisible = false
    },
    // 刷新按钮
    handleRefresh() {
      this.getList()
    },
    // 选择试剂
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 试剂展示翻页
    pageChange(page) {
      this.page = page
      this.getList()
    },
    // 编辑
    handleEdit() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning(`请选择一个需要编辑的试剂类别！`)
        return
      }
      this.formTitle = '编辑试剂类别'
      // 给form赋值
      const row = this.multipleSelection[0]
      Object.keys(this.formData).forEach(item => {
        this.formData[item] = row[item]
      })
      this.formVisible = true
    },
    onClose() {
      this.formVisible = false
      this.formData = {
        name1: undefined,
        name2: undefined,
        relation: undefined,
        description: undefined
      }
      this.$refs['elForm'].resetFields()
    },
    handelAddConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const data = JSON.parse(JSON.stringify(this.formData))
        relation_update_add(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.formVisible = false
          this.getList()
        })
        // this.onClose()
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.main-container-text{
  min-height:calc(100vh - 110px) ;
  padding: 1rem;
  margin: 1rem;
  background: white;
  .title{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .header{
    margin: 1rem 0 1rem 0;
    .el-input{
      width: 12.5rem;
      margin-right: 1rem;
    }
    .el-select {
      margin-right: 1rem;
    }
    .header-right{
      float: right;
    }
  }
}

.user-header {
  margin-bottom: 1rem;
  .el-input{
    width: 150px;
    margin-right: 1rem;
  }
}

</style>
