<template>
    <div class="contradiction-div">
        <Table border :columns="tableColumns" :data="tableData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="showIndicatory(row)" >添加指标</Button>
          <!-- <Button size="small" style="margin-right: 5px" type="warning" @click="deleteRatingDictTypeAll(row)" >删除全部指标</Button> -->
        </template>
      </Table>
      <Page
        class="page_style"
        :total="params.totalRecord"
        :current="params.pageNo"
        :page-size="params.pageSize"
        @on-change="changePageNo"
        show-total
        show-sizer
        @on-page-size-change="size"
      />
      <Modal footer-hide v-model="indicatory" title="添加指标" width="900" @on-visible-change="clearIndicatoryModel()">
        <Form :model="indicatoryModel" ref="indicatoryVerify" :rules="ruleValidate" label-position="right" :label-width="120">
          <Row>
            <Col span="23">
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="评估类别" prop="evaluate_type">
                        <Input v-model="indicatoryModel.evaluate_type"></Input>
                    </FormItem>
                  </p>
                </Col>
              </Row>
              <Row style="margin-top: 15px">
                  <Col>
                    <p>
                      <FormItem label="赋分项目" prop="scoring_project">
                        <Input
                          v-model="indicatoryModel.scoring_project"
                          type="textarea"
                          :rows="2"
                          placeholder="请输入赋分项目"
                          :maxlength="300"
                        />
                      </FormItem>
                    </p>
                  </Col>
                </Row>
              <Row>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="分值描述" prop="rating_description">
                        <Input v-model="indicatoryModel.rating_description"></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="最小分值" prop="min_num">
                        <InputNumber min="0" v-model="indicatoryModel.min_num" style="width: 100%"></InputNumber>
                    </FormItem>
                  </p>
                </Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="最大分值" prop="max_num">
                        <InputNumber min="0" v-model="indicatoryModel.max_num" style="width: 100%"></InputNumber>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="排序" prop="sort">
                      <InputNumber min="0" v-model="indicatoryModel.sort" style="width: 100%"></InputNumber>
                    </FormItem>
                  </p>
                </Col>
              </Row>
            </Col>
          </Row>
        </Form>
        <div style="text-align: right;">
          <Button type="info" style="margin-right: 5px; margin-bottom: 30px;" @click="saveRatingDict()" >添加指标</Button>
        </div>
         <Table border :columns="indicatoryColumns" :data="indicatoryData">
            <template slot-scope="{ row, index }" slot="action">
            <Button size="small" style="margin-right: 5px" type="warning" @click="deleteRatingDictType(row)" >删除</Button>
            </template>
      </Table>
      </Modal>
    </div>
</template>
<script>
import {
  selectRatingDictTypeList,
  selectRatingDictList,
  deleteRatingDict,
  saveRatingDict
} from '@/api/key-person'
export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      indicatoryData: [],
      tableLoading: false,
      ratingDict: false,
      indicatory: false,
      indicatoryModel: {
        rating_dict_type: '',
        evaluate_type: '',
        scoring_project: '',
        rating_description: '',
        min_num: '',
        max_num: '',
        sort: '',
        is_history: '2'// 默认是2启用的数据
      },
      indicatorySub: {
        rating_dict_type: '',
        id: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableColumns: [
        { type: 'index', title: '序号', align: 'center', width: '100' },
        { title: '类别', key: 'name', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      indicatoryColumns: [
        { type: 'index', title: '序号', align: 'center', width: '100' },
        { title: '评估类别', key: 'evaluate_type', align: 'center' },
        { title: '赋分项目', key: 'scoring_project', align: 'center' },
        { title: '分值描述', key: 'rating_description', align: 'center' },
        { title: '最小分值', key: 'min_num', align: 'center' },
        { title: '最大分值', key: 'max_num', align: 'center' },
        { title: '排序', key: 'sort', align: 'center' }
        // { title: '操作', slot: 'action', align: 'center', width: '100' }
      ],
      ruleValidate: {
        evaluate_type: [{ required: true, message: '评估类别必填', trigger: 'blur', type: 'string' }],
        scoring_project: [{ required: true, message: '赋分项目必填', trigger: 'blur', type: 'string' }],
        min_num: [{ required: true, message: '最小分值必填', trigger: 'blur', type: 'number' }],
        max_num: [{ required: true, message: '最大分值必填', trigger: 'blur', type: 'number' }],
        sort: [
          { required: true, message: '排序必填', trigger: 'blur', type: 'number' }
        ],
        rating_description: [{ required: true, message: '分值描述必填', trigger: 'blur', type: 'string' }]
      }
    }
  },
  methods: {
    init () {
      selectRatingDictTypeList(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData = ret.data.data.results
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.init(this.params)
    },
    clearIndicatoryModel () {
      this.indicatoryModel.evaluate_type = null
      this.indicatoryModel.scoring_project = null
      this.indicatoryModel.rating_description = null
      this.indicatoryModel.min_num = null
      this.indicatoryModel.max_num = null
      this.indicatoryModel.sort = null
    },
    showIndicatory (row) {
      this.indicatory = true
      this.indicatoryModel.rating_dict_type = row.rating_dict_type
      selectRatingDictList(this.indicatoryModel).then((ret) => {
        if (ret.data.errcode === 0) {
          this.indicatoryData = ret.data.data
          this.ratingDict = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    deleteRatingDictTypeAll (row) {
      this.indicatorySub.rating_dict_type = row.rating_dict_type
      deleteRatingDict(this.indicatorySub).then((ret) => {
        if (ret.data.errcode === 0) {
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    deleteRatingDictType (row) {
      this.indicatorySub.id = row.id
      deleteRatingDict(this.indicatorySub).then((ret) => {
        if (ret.data.errcode === 0) {
          this.indicatory = {}
          this.$Notice.success({ title: '删除成功' })
          selectRatingDictList(this.indicatoryModel).then((ret) => {
            if (ret.data.errcode === 0) {
              this.indicatoryData = ret.data.data
            } else {
              this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
            }
          })
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    saveRatingDict () {
      this.$refs['indicatoryVerify'].validate((valid) => {
        if (valid) {
          saveRatingDict(this.indicatoryModel).then((ret) => {
            if (ret.data.errcode === 0) {
              selectRatingDictList(this.indicatoryModel).then((ret) => {
                if (ret.data.errcode === 0) {
                  this.indicatoryData = ret.data.data
                  this.ratingDict = false
                  this.indicatoryModel.evaluate_type = null
                  this.indicatoryModel.scoring_project = null
                  this.indicatoryModel.rating_description = null
                  this.indicatoryModel.min_num = null
                  this.indicatoryModel.max_num = null
                  this.indicatoryModel.sort = null
                  this.$Notice.success({ title: '添加成功' })
                } else {
                  this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
                }
              })
            } else {
              this.$Notice.error({ title: '添加指标失败！', desc: ret.data.errmsg })
            }
          })
        } else {
          this.$Message.error('必填项不可为空!')
        }
      })
    },
    deleteRatingDict (row) {
      this.indicatory.id = row.id
      deleteRatingDict(row).then((ret) => {
        if (ret.data.errcode === 0) {
          this.indicatorySub = {}
          this.$Notice.success({ title: '删除成功' })
          selectRatingDictList(this.indicatoryModel).then((ret) => {
            if (ret.data.errcode === 0) {
              this.indicatoryData = ret.data.data
              this.ratingDict = false
            } else {
              this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
            }
          })
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    handleReset () {
      this.$refs['indicatoryVerify'].resetFields()
    }
  },
  mounted () {
    // this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  }
}
</script>
<style scoped>
.contradiction-div {
  padding: 10px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.contradiction-div .search-div {
  width: 100%;
  padding: 15px 15px 15px 15px;
  border: 1px solid skyblue;
  background-color: azure;
  margin-bottom: 15px;
}
.mb10 {
  margin-bottom: 10px;
}
.mt8 {
  margin-top: 8px;
}
.mr15 {
  margin-right: 15px;
}
.mr5 {
  margin-right: 5px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.circle-div1 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
}
.circle-div2 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: orange;
}
.circle-div3 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: green;
}
.show-more {
  margin-top: 5px;
  cursor: pointer;
}
.contradiction-div >>> .ivu-form .ivu-form-item-label {
  text-align: center;
}
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
</style>
