<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form :label-width="120">
        <Row>
          <Col span="6">
            <FormItem label="嫌疑人：">
              <Input v-model="searchInfo.suspect_name" placeholder="请输入嫌疑人姓名"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="嫌疑人身份证号码：">
              <Input v-model="searchInfo.suspect_cardno" placeholder="请输入嫌疑人身份证号码"/>
            </FormItem>
          </Col>
          <Col span="5" offset="1">
            <Button type="primary" @click="searchData" >查询</Button>
            <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
            <Button type="primary" @click="addData('1')" style="margin-left: 10px;">新增</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div>
      <vxe-table
        resizable
        :tree-config="{children: 'child'}"
        :data="dataList">
        <!--        <vxe-table-column type="checkbox" width="280" tree-node></vxe-table-column>-->
        <vxe-table-column field="label" title="纠纷名称" tree-node></vxe-table-column>
        <vxe-table-column field="is_easy" title="易引发群体性事件纠纷">
          <template #default="{ row }">
            <RadioGroup v-if="row.parent_id !== '0'" v-model="row.is_easy" @on-change="(val) => isEasyChange(val, row)">
              <Radio label="1">是</Radio>
              <Radio label="0">否</Radio>
            </RadioGroup>
          </template>
        </vxe-table-column>
        <vxe-table-column field="sort" title="排序"></vxe-table-column>
        <vxe-table-column field="date" min-width="20%" title="操作">
          <template v-slot="{ row }">
            <Button v-if="row.parent_id === '0'" size="small" style="margin-right: 10px;" class="actionBtn" type="info"
                    @click="addData('2',row)">
              添加小类
            </Button>
            <Button v-if="row.parent_id === '0'" size="small" style="margin-right: 10px;" class="actionBtn" type="primary"
                    @click="addData('4',row)">
              修改大类
            </Button>
            <Button v-if="row.parent_id !== '0'" style="margin-right: 10px;" size="small" class="actionBtn"
                    type="primary" @click="addData('3', row)">修改
            </Button>
            <Button size="small" class="actionBtn" type="error" @click="del(row)">删除
            </Button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <Modal v-model="addModel" :title="'新增'+ addTitle" width="500">
      <Form ref="form" :model="form" :label-width="90" :rules="ruleValidate">
        <Row>
          <Col span="12">
            <FormItem :label="addTitle+ '：'" prop="label" required>
              <Input type="text" v-model="form.label" placeholder="请填写纠纷名称"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="排序" prop="sort" required>
              <Input
                v-model="form.sort"
                type="number"
                placeholder=""
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <div>
          <Button type="text" size="large" @click="addModel = false;">取消</Button>
          <Button type="primary" size="large" @click="handleSubmit('form')">确定</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>

import {
  selectEventCategoryList, insertEventCategory, updateEventCategory
} from '@/api/contradiction.js'
// import { deletePeopleZFLog } from '@/api/peopleInfo'

// import { getInfoFromId } from '@/api/common.js'
// import axios from 'axios'
// import * as XLSX from 'xlsx'

export default {
  name: 'register',
  data () {
    return {
      searchInfo: {},
      addModel: false,
      addTitle: '',
      dataList: [{}],
      addStatuts: '',
      updateRow: {},
      ruleValidate: {
        label: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '必填', trigger: 'blur', type: 'number' }
        ]
        // riskWeight: [
        //   { required: true, message: '必填', trigger: 'blur' }
        // ]
      },
      form: {
        label: '',
        sort: 0
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  mounted () {
    this.list_url = selectEventCategoryList
    this.getList()
  },
  methods: {
    isEasyChange (e, row) {
      this.$Modal.confirm({
        title: '是否确认切换？',
        loading: true,
        onOk: () => {
          updateEventCategory({ id: row.id, is_easy: e }).then((ret) => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '切换成功！'
              })
              this.getList()
            } else {
              this.$Message.success({
                content: '切换失败！'
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    addSmallList (item, index) {
      this.form.items[index].List.push(
        {
          value: '',
          status: 1,
          gender: '2'
        }
      )
      this.$forceUpdate()
    },
    del (row) {
      if (row.parent_id === '0' && row.child.length !== 0) {
        this.$Message.error({
          content: '纠纷大类下存在纠纷小类不可删除!'
        })
        return
      }
      console.log(row, 'row啊撒大声地')
      this.$Modal.confirm({
        title: '是否确认删除？',
        loading: true,
        onOk: () => {
          updateEventCategory({ label: row.label, sort: row.sort, id: row.id, del_flag: '1' }).then((ret) => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '删除成功！'
              })
              this.getList()
            } else {
              this.$Message.error({
                content: '删除失败'
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    upd () {

    },
    handleSubmit (name) {
      if (this.form.sort) {
        this.form.sort = parseInt(this.form.sort)
      }

      this.$refs[name].validate((valid) => {
        console.log(valid, 'valid')
        console.log(this.addStatuts, 'this.addStatuts')
        if (valid) {
          if (this.addStatuts === '3' || this.addStatuts === '4') {
            updateEventCategory({ label: this.form.label, sort: this.form.sort, id: this.form.id }).then(ret => {
              if (ret.data.errcode === 0) {
                this.addModel = false
                this.getList()
                this.$Message.success({
                  content: '修改成功！'
                })
              } else {
                this.addModel = false
                this.$Message.error({})
              }
            })
          } else {
            let data = {}
            if (this.addStatuts === '1') {
              data = {
                label: this.form.label,
                sort: this.form.sort,
                parent_id: this.form.parent_id
              }
            } else if (this.addStatuts === '2') {
              data = {
                label: this.form.label,
                sort: this.form.sort,
                parent_id: this.form.id
              }
            }
            insertEventCategory({ ...data }).then(ret => {
              if (ret.data.errcode === 0) {
                this.addModel = false
                this.getList()
                this.$Message.success({
                  content: '添加成功！'
                })
              } else {
                this.addModel = false
                this.$Message.error({})
              }
            })
          }
        } else {
          this.$Message.error('请完善页面必填校验!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    handleAdd () {
      this.form.items.push({
        List: [{
          value: '',
          status: 1,
          gender: '2'
        }],
        value: '',
        status: 1
      })
    },
    handleSmallRemove (index, index1) {
      if (this.form.items[index].List.length > 1) {
        let temp = []
        this.form.items[index].List.forEach((item, num) => {
          if (num !== index1) {
            temp.push(item)
          }
        })
        this.form.items[index].List = temp
        this.$forceUpdate()
      } else {
        this.$Message.warning('当前纠纷小类不可删除')
      }
    },
    handleRemove (indexNum) {
      if (this.form.items.length > 1) {
        let temp = []
        this.form.items.forEach((item, index) => {
          if (index !== indexNum) {
            temp.push(item)
          }
        })
        this.form.items = temp
        this.$forceUpdate()
      } else {
        this.$Message.warning('当前纠纷大类不可删除')
      }
    },
    addData (type, row) {
      console.log(row, 'row')
      this.addStatuts = type
      this.addTitle = type === '1' ? '纠纷大类' : '纠纷小类'

      if (type === '2') {
        this.form.label = ''
        this.form.sort = 0
        this.form.id = row.id
      } else {
        row ? this.form = row : this.form = { parent_id: 0, label: '', sort: 0 }
        if (type !== '1') {
          this.form.sort = parseInt(row.sort)
        }
      }
      this.addModel = true
    },
    reset () {
      this.searchInfo = {}
      this.params = {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
      this.searchData()
    },
    getList (item) {
      console.log('调用列表接口', item, this.params)
      if (item) {
        this.params = Object.assign(this.params, item)
      }
      console.log('fafasd', this.params)
      this.list_url(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
          console.log(this.dataList, ' this.dataList')
          // this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    // size (pageSize) {
    //   this.params.pageSize = pageSize
    //   this.changePageNo()
    // },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    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 0px 15px;
    // min-height: 200px;
    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;
}

// /deep/ input:disabled,textarea:disabled {
//   opacity: 1;
//   -webkit-text-fill-color: #515a6e;
//   font-size: 14px;
// }

/* 修改被禁用的Select组件的文本颜色 */
/deep/ .ivu-select-disabled .ivu-select-selected-value {
  color: #515a6e; /* 修改为你想要的颜色 */
}

// /deep/ .ivu-select-disabled .ivu-select-placeholder{
//     color: #515a6e; /* 修改为你想要的颜色 */
//     font-size: 14px;
// }
/deep/ .ivu-input-disabled {
  color: #515a6e !important; /* 修改为你想要的颜色 */
}
</style>
