<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width: 90%">
        <Row class="mb10">
          <Col span="8">
            <span>风险因子名称：</span>
            <Input
              clearable
              style="width: 70%"
              v-model="searchInfo.factorName"
              placeholder="请输入"
            />
          </Col>
          <!-- <Col span="4">
            <span>权值：</span>
            <Input
              type="number"
              style="width: 70%"
              v-model="searchInfo.riskWeight"
              placeholder="请输入"
            />
          </Col> -->
          <Col span="2">
            <Button type="info" @click="searchData">查询</Button>
          </Col>
           <Col span="2">
            <Button type="info" @click="revert">重置</Button>
          </Col>
          <Col span="2">
            <Button type="success" @click="addData">新增</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button @click="updateData(row)" type="info" class="mr5">编辑</Button>
          <Button @click="removeData(row)" type="error" class="mr5"
            >删除</Button
          >
        </div>
      </template>
    </Table>
    <Modal v-model="modal1" :title="title" width="500">
      <Form ref="form" :model="addObj" :rules="ruleValidate" :label-width="150">
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="风险因子名称" prop="factorName" required style="">
              <Input type="text" v-model="addObj.factorName" placeholder=""></Input>
            </FormItem>
          </Col>
        </Row>
        <!-- <Row :gutter="16">
          <Col span="20">
            <FormItem label="权值" prop="riskWeight" required style="">
              <Input
                v-model="addObj.riskWeight"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row> -->
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modal1 = false">取消</Button>
        <Button type="primary" size="large" @click="doAddData">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  selectARiskFactorList,
  deleteRiskFactorById,
  insertRiskFactor,
  updateRiskFactor
  // findEventLogByOfficeStatusList,
  // updateEventAcceptance,
  // insertEventFlowLog,
  // selectOfficeList,
  // insertEventFlowLogAssignment,
  // findEventLogByCreateList,
  // selectCityList,
  // selectDictList
} from '@/api/contradiction.js'
// import { datetime2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  data () {
    return {
      title: '',
      ruleValidate: {
        factorName: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
        // riskWeight: [
        //   { required: true, message: '必填', trigger: 'blur' }
        // ]
      },
      addObj: {
        id: '',
        factorName: ''
        // riskWeight: ''
      },
      modal1: false,
      dataParam: {},
      searchInfo: {},
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        {
          title: '风险因子名称',
          key: 'factorName',
          align: 'center'
          // width: '160px'
        },
        // {
        //   title: '权值',
        //   key: 'riskWeight',
        //   align: 'center',
        //   width: '350px'
        // },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '250'
        }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        eventType: '2'
      },
      type: '',
      url: '',
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    this.type = this.$route.query.type
    // this.list_url =
    //   this.type === '1'
    //     ? findEventLogByCreateList
    //     : findEventLogByOfficeStatusList
    this.list_url = selectARiskFactorList
    this.getList()
    // if (this.serverUserInfo.name.indexOf('网格员') !== -1) {
    //   // 此账号是网格员账号
    //   this.columns.splice(6, 1)
    // }
  },
  methods: {
    revert () {
      this.searchInfo.factorName = ''
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    doAddData () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            insertRiskFactor(this.addObj).then(ret => {
              if (ret.data.errcode === 0) {
                this.modal1 = false
                this.getList()
                this.$Message.success({
                  content: '新增成功！'
                })
              } else {
                this.modal1 = false
                this.$Message.error({
                  content: '新增失败\n' + ret.data.errmsg
                })
              }
            })
          } else if (this.title === '编辑') {
            updateRiskFactor(this.addObj).then(ret => {
              if (ret.data.errcode === 0) {
                this.modal1 = false
                this.getList()
                this.$Message.success({
                  content: '编辑成功！'
                })
              } else {
                this.modal1 = false
                this.$Message.error({})
              }
            })
          }
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    addData () {
      this.addObj.id = ''
      this.addObj.factorName = ''
      // this.addObj.riskWeight = ''
      this.title = '新增'
      this.$refs['form'].resetFields()
      this.modal1 = true
    },
    updateData (row) {
      this.title = '编辑'
      this.$refs['form'].resetFields()
      this.modal1 = true
      this.addObj.id = row.id
      this.addObj.factorName = row.factorName
      // this.addObj.riskWeight = row.riskWeight + ''
    },
    removeData (row) {
      this.$Modal.confirm({
        title: '确认删除？',
        // content: '此操作会删除该菜单下全部菜单',
        loading: true,
        onOk: () => {
          this.deleteArea(row.id)
        }
      })
    },
    deleteArea (val) {
      deleteRiskFactorById({ id: val }).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Modal.remove()
          this.getList()
          this.$Message.success({
            content: '删除成功！'
          })
        } else {
          this.$Modal.remove()
          this.$Message.error({
            content: '删除失败\n' + ret.data.errmsg
          })
        }
      })
    },
    getList (item) {
      // if (item) {
      //   this.params = Object.assign(this.params, item)
      //   if (this.params.occurrenceTimeStart) {
      //     this.params.occurrenceTimeStart = datetime2str(
      //       this.params.occurrenceTimeStart
      //     )
      //   }
      //   if (this.params.occurrenceTimeEnd) {
      //     this.params.occurrenceTimeEnd = datetime2str(
      //       this.params.occurrenceTimeEnd
      //     )
      //   }
      //   if (this.params.resolveTimeStart) {
      //     this.params.resolveTimeStart = datetime2str(
      //       this.params.resolveTimeStart
      //     )
      //   }
      //   if (this.params.resolveTimeEnd) {
      //     this.params.resolveTimeEnd = datetime2str(this.params.resolveTimeEnd)
      //   }
      // }
      this.list_url(this.searchInfo).then((res) => {
        if (res.data.errcode === 0) {
          // let tempArr = res.data.data.results
          this.dataList = res.data.data
          // TODO 连接口
          // this.dataList = [
          //   { id: 1, name: 'aaa', weight: 2 },
          //   { id: 2, name: 'aaa1', weight: 3 }
          // ]
        }
      })
    },
    searchData () {
      this.getList(this.searchInfo)
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
<style scoped lang="less">
.contradiction-div {
  padding: 10px;
  .search-div {
    float: left;
    width: 100%;
    padding: 15px 30px 15px 15px;
    // min-height: 200px;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}
.mb10 {
  // margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mt8 {
  margin-top: 8px;
}
.mr15 {
  margin-right: 15px;
}
.mr5 {
  margin-right: 5px;
}
.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
