<template>
  <div class="main-container-text">
    <div class="title">自定义表单</div>
    <div class="header">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" plain @click="handleEdit"><i class="el-icon-edit" />编辑</el-button>
      <el-button plain type="danger" @click="handleDis"><svg-icon icon-class="确认禁用" /> 禁用</el-button>
      <el-button plain type="success" @click="handleEn"><svg-icon icon-class="解除禁用" /> 启用</el-button>
      <div class="header-right">
        <el-button type="primary" plain @click="handleDel">删除</el-button>
        <el-button icon="el-icon-refresh" circle @click="getList" />
      </div>
    </div>
    <el-table
      v-loading="loading"
      stripe
      :data="tableData"
      :header-cell-style="headerStyle"
      height="69vh"
      element-loading-text="拼命加载中"
      @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="name"
        show-overflow-tooltip
        label="名称"
        align="center"
      />
      <el-table-column
        prop="key_lenth"
        label="长度"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="description"
        label="描述"
        align="center"
      />
      <el-table-column
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.is_use=== 0 ? 'danger' : 'success'"
            disable-transitions
          >{{ scope.row.is_use=== 0 ?'未启用':'启用' }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="my-pagination" style="text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="total"
        :disabled="loading"
        :page-size.sync="page_size"
        @current-change="pageChange"
      />
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :title="title" @close="handleClose">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="50px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="长度" prop="key_lenth">
          <el-input v-model.number="formData.key_lenth" placeholder="请输入长度" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="formData.description" placeholder="请输入描述" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="启用" prop="is_use" required>
          <el-switch v-model="formData.is_use" />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get_list, del, add_update } from '@/api/reagent/customform'
import stringify from '@/utils/stringify'

export default {
  name: 'CustomForm',
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 100,
      dialogVisible: false,
      loading: true,
      title: '',
      tableData: [],
      headerStyle: { 'background': '#E6E6E6' },
      multipleSelection: [],
      formData: {
        name: undefined,
        key_lenth: undefined,
        description: undefined,
        is_use: true
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        key_lenth: [{
          required: true,
          message: '请输入长度',
          trigger: 'blur'
        }],
        description: [],
        is_use: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const data = JSON.parse(JSON.stringify(this.formData))
        data.is_use = data.is_use ? 1 : 0
        data.drug_form_id = data.id
        add_update(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.getList()
        })
      })
    },
    getList() {
      const data = {
        page: this.page,
        page_size: this.page_size
      }
      this.loading = true
      get_list(stringify(data)).then(res => {
        this.tableData = res.data.data_list
        this.total = res.data.total_count
      }).finally(() => { this.loading = false })
    },
    pageChange(page) {
      this.page = page
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      this.title = '新增表单项'
      this.dialogVisible = true
    },
    handleEdit() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个表单项')
        return
      }
      this.title = '编辑表单项'
      this.formData = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      this.formData.is_use = this.formData.is_use === 1
      this.dialogVisible = true
    },
    handleDel() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个表单项')
        return
      }
      this.$confirm('此操作将永久删除该表单自定义项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          drug_form_id: this.multipleSelection[0].id
        }
        del(stringify(data)).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDis() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个表单项')
        return
      }
      this.$confirm('是否禁用该表单自定义项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = JSON.parse(JSON.stringify(this.multipleSelection[0]))
        data.is_use = 0
        data.drug_form_id = data.id
        add_update(stringify(data)).then(res => { this.$message.success(res.msg); this.getList() })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        })
      })
    },
    handleEn() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个表单项')
        return
      }
      const data = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      data.is_use = 1
      data.drug_form_id = data.id
      add_update(stringify(data)).then(res => { this.$message.success(res.msg); this.getList() })
    },
    handleClose() {
      this.formData = {
        name: undefined,
        key_lenth: undefined,
        description: undefined,
        is_use: true
      }
      this.$refs['elForm'].resetFields()
    }
  }
}
</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: 9.375rem;
      margin-right: 1rem;
    }
    .el-select {
      margin-right: 1rem;
    }
    .header-right{
      float: right;
    }
  }
}
.add-item{
  margin-bottom: 1rem;
}
</style>
