<template>
  <div>
    <div class="contradiction-div">
      <div class="title-style">超期预警设置</div>
      <Form ref="form" :model="addObj" :rules="ruleValidate" :label-width="150">
        <Row :gutter="16" style="display: flex;margin-bottom: 10px;">
          <div style="margin-left: 260px;">黄灯天数</div>
          <div style="margin-left: 440px;">红灯天数</div>
        </Row>
        <Row :gutter="16">
          <Col span="8">
            <FormItem label="一般风险预警值" prop="singleRiskWarningValue" required style="">
              <Input
                v-model="addObj.singleRiskWarningValue"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="" prop="singleRiskWarningValue1" required style="">
              <Input
                v-model="addObj.singleRiskWarningValue1"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="8">
            <FormItem label="复杂风险预警值" prop="complexRiskWarningValue" required style="">
              <Input
                v-model="addObj.complexRiskWarningValue"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="" prop="complexRiskWarningValue1" required style="">
              <Input
                v-model="addObj.complexRiskWarningValue1"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="8">
            <FormItem label="重大风险预警值" prop="significantRiskWarningValue" required style="">
              <Input
                v-model="addObj.significantRiskWarningValue"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="" prop="significantRiskWarningValue1" required style="">
              <Input
                v-model="addObj.significantRiskWarningValue1"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <!-- <div class="search-div">
      <div style="width: 90%">
        <Row class="mb10">
          <Col span="8">
            <span>矛盾纠纷类型：</span>
            <Select style="width: 55%" v-model="searchInfo.type" clearable>
              <Option
                v-for="(item, index) in type1List"
                :key="index"
                :value="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </Col>
          <Col span="8">
            <span>矛盾纠纷小类：</span>
            <Select style="width: 55%" v-model="searchInfo.type1" clearable>
              <Option
                v-for="(item, index) in type1List"
                :key="index"
                :value="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </Col>
          <Col span="2">
            <Button type="info" @click="searchData">查询</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="type">
        <div>{{ getType1(row.type) }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="type1">
        <div>{{ getType1(row.type1) }}</div>
      </template>
      <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="type" required style="">
              <Select style="" v-model="addObj.type" clearable>
                <Option
                  v-for="(item, index) in type1List"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="矛盾纠纷小类" prop="type1" required style="">
              <Select style="" v-model="addObj.type1" clearable>
                <Option
                  v-for="(item, index) in type1List"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="一般风险预警值" prop="singleRiskWarningValue" required style="">
              <Input
                v-model="addObj.singleRiskWarningValue"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="复杂风险预警值" prop="complexRiskWarningValue" required style="">
              <Input
                v-model="addObj.complexRiskWarningValue"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="重大风险预警值" prop="significantRiskWarningValue" required style="">
              <Input
                v-model="addObj.significantRiskWarningValue"
                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>
    <div style="width: 100%; text-align: center">
      <Button type="primary" style="margin-top: 10px; width: 100px" @click="doAddData"
        >保存</Button
      >
    </div>
  </div>
</template>
<script>
import {
  selectConflictWarningList,
  updateConflictWarning
  // findEventLogByOfficeStatusList,
  // updateEventAcceptance,
  // insertEventFlowLog,
  // selectOfficeList,
  // insertEventFlowLogAssignment,
  // findEventLogByCreateList,
  // selectCityList,
  // selectDictList
} from '@/api/contradiction.js'
// import { datetime2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  data () {
    return {
      type1List: [
        { id: '1', name: 'aaa' },
        { id: '2', name: 'bbb' }
      ],
      title: '',
      ruleValidate: {
        singleRiskWarningValue: [{ required: true, message: '必填', trigger: 'blur' }],
        complexRiskWarningValue: [{ required: true, message: '必填', trigger: 'blur' }],
        significantRiskWarningValue: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      addObj: {
        singleRiskWarningValue: '',
        complexRiskWarningValue: '',
        significantRiskWarningValue: ''
      },
      modal1: false,
      dataParam: {},
      searchInfo: {},
      columns: [
        { type: 'index', title: '排序', align: 'center', width: '80px' },
        {
          title: '矛盾纠纷类型',
          slot: 'type',
          align: 'center'
          // width: '160px'
        },
        {
          title: '矛盾纠纷小类',
          slot: 'type1',
          align: 'center'
          // width: '150px'
        },
        {
          title: '一般风险预警值',
          key: 'singleRiskWarningValue',
          align: 'center',
          width: '150px'
        },
        {
          title: '复杂风险预警值',
          key: 'complexRiskWarningValue',
          align: 'center',
          width: '150px'
        },
        {
          title: '重大风险预警值',
          key: 'significantRiskWarningValue',
          align: 'center',
          width: '150px'
        },
        {
          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 = selectConflictWarningList
    this.getList()
    // if (this.serverUserInfo.name.indexOf('网格员') !== -1) {
    //   // 此账号是网格员账号
    //   this.columns.splice(6, 1)
    // }
  },
  methods: {
    getType1 (type) {
      let arr = this.type1List.filter((item) => item.id === type)
      return arr[0].name
    },
    doAddData () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let param = []
          Object.keys(this.addObj).forEach(key => {
            param.push({ id: key, conflictWarningValue: this.addObj[key] })
          })
          updateConflictWarning({ list: param }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '保存成功！'
              })
            } else {
              this.$Message.error({
                content: '保存失败\n' + ret.data.errmsg
              })
            }
            this.getList()
          })
        } else {
          this.$Message.error('检验失败!')
        }
      })
    },
    addData () {
      this.addObj.singleRiskWarningValue = ''
      this.addObj.complexRiskWarningValue = ''
      this.addObj.significantRiskWarningValue = ''
      this.title = '新增'
      this.$refs['form'].resetFields()
      this.modal1 = true
    },
    updateData (row) {
      this.title = '编辑'
      this.$refs['form'].resetFields()
      this.modal1 = true
      this.addObj.singleRiskWarningValue = row.singleRiskWarningValue + ''
      this.addObj.complexRiskWarningValue = row.complexRiskWarningValue + ''
      this.addObj.significantRiskWarningValue = row.significantRiskWarningValue + ''
    },
    removeData (row) {
      this.$Modal.confirm({
        title: '确认删除？',
        // content: '此操作会删除该菜单下全部菜单',
        loading: true,
        onOk: () => {
          this.deleteArea(row)
        }
      })
    },
    deleteArea (val) {
      console.log(val, '删除数据')
      this.$Modal.remove()
      this.$Message.success({
        content: '删除成功！'
      })
      // delArea({ id: val }).then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.$Modal.remove()
      //     this.init()
      //     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({}).then((res) => {
        if (res.data.errcode === 0) {
          // let tempArr = res.data.data.results
          let obj = {}
          res.data.data.forEach((item) => {
            obj[item.id] = item.conflictWarningValue
          })
          this.addObj.singleRiskWarningValue = obj.singleRiskWarningValue
          this.addObj.complexRiskWarningValue = obj.complexRiskWarningValue
          this.addObj.significantRiskWarningValue = obj.significantRiskWarningValue
          // this.addObj.singleRiskWarningValue = res.data.data[0].singleRiskWarningValue // 一般
          // this.addObj.complexRiskWarningValue = res.data.data[0].complexRiskWarningValue // 复杂
          // this.addObj.significantRiskWarningValue = res.data.data[0].significantRiskWarningValue // 重大

          // this.dataList = res.data.data.results
          // TODO 连接口
          // this.dataList = [
          //   {
          //     id: 1,
          //     type: '1',
          //     type1: '2',
          //     singleRiskWarningValue: 1,
          //     complexRiskWarningValue: 2,
          //     significantRiskWarningValue: 3
          //   },
          //   {
          //     id: 2,
          //     type: '1',
          //     type1: '2',
          //     singleRiskWarningValue: 1,
          //     complexRiskWarningValue: 2,
          //     significantRiskWarningValue: 3
          //   },
          //   {
          //     id: 3,
          //     type: '1',
          //     type1: '2',
          //     singleRiskWarningValue: 1,
          //     complexRiskWarningValue: 2,
          //     significantRiskWarningValue: 3
          //   }
          // ]
        }
      })
    },
    searchData () {
      this.getList(this.searchInfo)
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
<style scoped lang="less">
.contradiction-div {
  // padding: 10px;
  background: #fff;
  padding: 20px;
  font-size: 14px;
  .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;
  }
  .title-style {
    padding: 8px 12px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 15px 0;
    font-size: 16px;
    width: 100%;
  }
}
.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>
