<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width: 90%">
        <Row class="mb10">
          <Col span="6">
            <span>数据栏名称：</span>
            <Select v-model="searchInfo.data_type" :clearable="true" style="width: 70%">
              <Option value="1">刑事案件数</Option>
              <Option value="2">八类暴力犯罪案件数</Option>
              <Option value="3">电信网络诈骗案件数</Option>
              <Option value="4">盗窃、抢劫、抢夺案件数</Option>
              <Option value="5">民转刑案件数</Option>
              <Option value="6">涉毒案件数</Option>
              <Option value="7">治安案件数</Option>
              <Option value="8">扰乱公共秩序案件数</Option>
              <Option value="9">妨害社会管理秩序案件数</Option>
              <Option value="10">侵犯他人人身权利、财产权利案件数</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>年份：</span>
            <DatePicker type="year" v-model="searchInfo.year" style="width: 70%"  placeholder="请选择年份"></DatePicker>
          </Col>

          <Col span="6" v-if="user_level ==='2'">
            <span>市级名称：</span>
              <Select
                v-model="searchInfo.create_by"
                placeholder="请选择市"
                style="width: 70%"
                :clearable="true"
              >
                <Option
                  v-for="item in areaData.list1"
                  :value="item.parent_id"
                  :key="item.parent_id"
                >{{ item.name }}</Option
                >
              </Select>
          </Col>
          <Col span="1">
            <Button type="primary" @click="searchData">查询</Button>
          </Col>
          <Col span="1">
            <Button type="primary" @click="revert">重置</Button>
          </Col>
          <Col span="1">
            <Button type="primary" @click="addData">新增</Button>
          </Col>
          <Col span="1">
            <Button type="primary" @click="handleDownload" >导出</Button>
          </Col>
        </Row>
      </div>
    </div>
      <Table stripe :columns="columns" :data="dataList" >
<!--        <template slot-scope="{ row, index }" slot="data_type">-->
<!--          <div v-if="row.data_type === '1'">刑事案件数</div>-->
<!--          <div v-else-if="row.data_type === '2'">八类暴力犯罪案件数</div>-->
<!--          <div v-else-if="row.data_type === '3'">电信网络诈骗案件数</div>-->
<!--          <div v-else-if="row.data_type === '4'">盗窃、抢劫、抢夺案件数</div>-->
<!--          <div v-else-if="row.data_type === '5'">民转刑案件数</div>-->
<!--          <div v-else-if="row.data_type === '6'">涉毒案件数</div>-->
<!--          <div v-else-if="row.data_type === '3'">治安案件数</div>-->
<!--          <div v-else-if="row.data_type === '4'">扰乱公共秩序案件数</div>-->
<!--          <div v-else-if="row.data_type === '5'">妨害社会管理秩序案件数</div>-->
<!--          <div v-else-if="row.data_type === '6'">侵犯他人人身权利、财产权利案件数</div>-->
<!--        </template>-->
        <template slot-scope="{ row, index }" slot="action" v-if="user_level !== '2'">
          <div class="flex-div">
            <Button @click="updateData(row)"  type="info" class="mr5">修改</Button>
            <Button @click="detailData(row)" type="primary" class="mr5">详情</Button>
            <Button @click="removeData(row)"  type="error" class="mr5">删除</Button>
          </div>
        </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 v-model="modal1" :title="title" width="1000">
      <Form ref="addObj" :model="addObj" :rules="ruleValidate" :disabled="title==='详情'" :label-width="150" style="margin: 30px 0">
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="年份" prop="year" required style="">
                <DatePicker type="year" v-model="addObj.year" style="width: 100%"  placeholder="请选择年份"></DatePicker>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="数据栏名称" prop="data_type" required  style="">
                <Select v-model="addObj.data_type" style="width: 100%">
                  <Option value="1">刑事案件数</Option>
                  <Option value="2">八类暴力犯罪案件数</Option>
                  <Option value="3">电信网络诈骗案件数</Option>
                  <Option value="4">盗窃、抢劫、抢夺案件数</Option>
                  <Option value="5">民转刑案件数</Option>
                  <Option value="6">涉毒案件数</Option>
                  <Option value="7">治安案件数</Option>
                  <Option value="8">扰乱公共秩序案件数</Option>
                  <Option value="9">妨害社会管理秩序案件数</Option>
                  <Option value="10">侵犯他人人身权利、财产权利案件数</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="一月份"   style="">
                <Input type="number"  v-model="addObj.month1" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="二月份"   style="">
                <Input type="number"  v-model="addObj.month2" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="三月份"  style="">
                <Input type="number"  v-model="addObj.month3" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="四月份"  style="">
                <Input type="number"  v-model="addObj.month4" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="五月份"  style="">
                <Input type="number"  v-model="addObj.month5" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="六月份"  style="">
                <Input type="number"  v-model="addObj.month6" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="七月份"  style="">
              <Input type="number"  v-model="addObj.month7" placeholder=""></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="八月份"  style="">
              <Input type="number"  v-model="addObj.month8" placeholder=""></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="九月份"  style="">
              <Input type="number"  v-model="addObj.month9" placeholder=""></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="十月份"  style="">
              <Input type="number"  v-model="addObj.month10" placeholder=""></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="十一月份"  style="">
              <Input type="number"  v-model="addObj.month11" placeholder=""></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="十二月份"  style="">
              <Input type="number"  v-model="addObj.month12" placeholder=""></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modal1 = false">取消</Button>
        <Button type="primary" v-if="title!=='详情'" size="large" @click="addConfirm">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  insertSocialSecurity, updateSocialSecurity, selectSocialSecurityInfo, selectSocialSecurityPageList, selectCityList
} from '@/api/contradiction.js'
import xeUtil from 'xe-utils'
import axios from 'axios'
export default {
  name: 'register',
  data () {
    return {
      title: '',
      addObj: {
        year: '',
        data_type: ''
      },
      ruleValidate: {
        year: [{ required: true, type: 'date', message: '必填', trigger: 'change' }],
        data_type: [{ required: true, message: '必填', trigger: 'change' }]
      },
      modal1: false,
      dataParam: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      searchInfo: {},
      columns: [
        // { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '数据栏名称', key: 'data_type', align: 'center', width: '145px' },
        { title: '年份', key: 'year', align: 'center' },
        { title: '一月份', key: 'month1', align: 'center' },
        { title: '二月份', key: 'month2', align: 'center' },
        { title: '三月份', key: 'month3', align: 'center' },
        { title: '四月份', key: 'month4', align: 'center' },
        { title: '五月份', key: 'month5', align: 'center' },
        { title: '六月份', key: 'month6', align: 'center' },
        { title: '七月份', key: 'month7', align: 'center' },
        { title: '八月份', key: 'month8', align: 'center' },
        { title: '九月份', key: 'month9', align: 'center' },
        { title: '十月份', key: 'month10', align: 'center' },
        { title: '十一月份', key: 'month11', align: 'center' },
        { title: '十二月份', key: 'month12', align: 'center' },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '250' }],
      dataList: [],
      type: '',
      url: '',
      list_url: '',
      user_level: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    this.user_level = this.$store.state.user.severUserInfo.company_grade
    if (this.user_level === '2') {
      this.getCityData('1')
    }
    this.list_url = selectSocialSecurityPageList
    this.getList()
  },
  methods: {
    revert () {
      this.searchInfo = {}
      this.searchData()
    },
    async handleDownload () {
      try {
        if (this.searchInfo.year) {
          this.searchInfo.year = xeUtil.toDateString(this.searchInfo.year, 'yyyy')
        }
        const response = await axios.post('/api/ac/jilinsscgsdp/SocialSecurityServiceImpl/selectSocialSecurityListExport', {
          ...this.searchInfo
        }, {
          responseType: 'blob'
        })
        const url = window.URL.createObjectURL(new Blob([response.data]))
        // 创建隐藏的a标签并设置属性
        const link = document.createElement('a')
        link.href = url
        link.download = '社会治安导出导出.xlsx' // 自定义下载文件名和扩展名
        link.style.display = 'none'
        document.body.appendChild(link)
        // 触发点击下载
        link.click()
        // 清理
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      } catch (error) {
        console.error('下载失败:', error)
        // 可以在这里添加错误提示
      }
    },
    async getCityData (level, id) {
      let res = await selectCityList({ parent_id: id })
      if (res.data.errcode === 0) {
        this.areaData['list' + level] = res.data.data
        return
      }
      this.$Message.error(res.errmsg)
    },
    addData () {
      this.title = '新增'
      this.addObj = {}
      this.$refs['addObj'].resetFields()
      this.modal1 = true
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList()
    },
    detailData (row) {
      this.title = '详情'
      selectSocialSecurityInfo({ id: row.id }).then(ret => {
        if (ret.data.errcode === 0) {
          this.addObj = ret.data.data
          this.modal1 = true
        } else {
        }
      })
    },
    updateData (row) {
      this.title = '修改'
      selectSocialSecurityInfo({ id: row.id }).then(ret => {
        if (ret.data.errcode === 0) {
          this.addObj = ret.data.data
          this.modal1 = true
        } else {
        }
      })
    },
    removeData (row) {
      this.$Modal.confirm({
        title: '确认删除？',
        loading: true,
        onOk: () => {
          this.deleteArea(row.id)
        }
      })
    },
    addConfirm () {
      this.$refs['addObj'].validate((valid) => {
        if (valid) {
          if (this.title === '修改') {
            this.addObj.year = xeUtil.toDateString(this.addObj.year, 'yyyy')
            updateSocialSecurity({ ...this.addObj }).then(ret => {
              if (ret.data.errcode === 0) {
                this.modal1 = false
                this.getList()
                this.$Message.success({
                  content: '修改成功！'
                })
              } else {
                this.$Message.error({
                  content: '修改失败\n' + ret.data.errmsg
                })
              }
            })
          } else {
            this.addObj.year = xeUtil.toDateString(this.addObj.year, 'yyyy')
            insertSocialSecurity({ ...this.addObj }).then(ret => {
              if (ret.data.errcode === 0) {
                this.modal1 = false
                this.getList()
                this.$Message.success({
                  content: '添加成功！'
                })
              } else {
                this.$Message.error({
                  content: '添加失败\n' + ret.data.errmsg
                })
              }
            })
          }
        } else {
          this.$Message.error({
            content: '请完善必填校验!'
          })
          return false
        }
      })
    },
    deleteArea (val) {
      updateSocialSecurity({ id: val, del_flag: '1' }).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 () {
      if (this.searchInfo.year) {
        this.searchInfo.year = xeUtil.toDateString(this.searchInfo.year, 'yyyy')
      }
      this.list_url({ ...this.searchInfo }).then((res) => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
        }
      })
    },
    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;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.mr5 {
  margin-right: 5px;
}
.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
