<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form :label-width="120">
          <Row>
            <Col span="6">
              <FormItem label="统计时间范围：">
                <DatePicker type="datetimerange" v-model="searchInfo.incident_time" format="yyyy-MM-dd HH:mm" style="width: 100%;" placeholder="请选择命案发生时间"></DatePicker>
              </FormItem>
            </Col>
            <Col span="6" v-if="severUserInfo.company_grade === '2'">
              <FormItem label="统计地区范围：">
                <Select v-model="searchInfo.city_id" :clearable="true" placeholder="请选择市" style="width:100%">
                  <Option v-for="item in cityList" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="5" offset="1">
              <Button type="primary" @click="reset">重置</Button>
              <Button type="primary" @click="searchData" style="margin-left: 10px;">查询</Button>
              <Button type="primary" @click="exportData" style="margin-left: 10px;">导出</Button>
            </Col>
          </Row>
      </Form>
    </div>
    <Table stripe :columns="columns" ref="table" :data="dataList"></Table>
  </div>
</template>
<script>
import { selectCityList } from '@/api/contradiction.js'
import { selectHomicideCaseStatisticsList } from '@/api/murder-management.js'
import { datetime2str } from '@/api/eventlist.js'

export default {
  name: 'murderStatistics',
  data () {
    return {
      searchInfo: {},
      columns: [
        { title: '市州', key: 'name', align: 'center', minWidth: 150 },
        { title: '命案数量', key: 'homicideNumber', align: 'center', minWidth: 100 },
        { title: '涉案总人数', key: 'involvedNumber', align: 'center', minWidth: 100 },
        { title: '嫌疑人总人数', key: 'suspectNumber', align: 'center', minWidth: 100 },
        { title: '嫌疑人重点人员数', key: 'personnelNumber', align: 'center', minWidth: 100 }
      ],
      dataList: [],
      cityList: [],
      severUserInfo: {}
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.setSearch()
    console.log(this.serverUserInfo)
    this.getList()
    this.getCityData()
  },
  methods: {
    exportData () {
      this.$refs.table.exportCsv({
        filename: '命案统计分析'
      })
    },
    getCityData () {
      selectCityList().then(res => {
        if (res.data.errcode === 0) {
          this.cityList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    reset () {
      this.searchInfo = {}
      this.setSearch()
      this.getList()
    },
    setSearch () {
      if (this.serverUserInfo.company_grade > 2) {
        let list = this.serverUserInfo.parent_ids.split(',')
        this.searchInfo.city_id = this.serverUserInfo.company_grade === '3' ? this.serverUserInfo.company_id : list[2]
      }
    },
    getList () {
      selectHomicideCaseStatisticsList(this.searchInfo).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    searchData () {
      if (this.searchInfo.incident_time) {
        this.searchInfo.incident_time_start = datetime2str(this.searchInfo.incident_time[0])
        this.searchInfo.incident_time_end = datetime2str(this.searchInfo.incident_time[1])
      }
      this.getList()
    }
  },
  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>
