<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="隐患类型">
          <el-select
            v-model="formSearch.type_id"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in optionTypes"
              :key="i + '1u'"
              :label="item.type"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隐患等级">
          <el-select
            v-model="formSearch.level_id"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item,ind) in optionLevels"
              :key="ind + 'ls'"
              :label="item.level"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域">
          <el-select
            v-model="formSearch.area_id"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item,ind) in optionAreas"
              :key="ind + 'ls'"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="治疗状态">
          <el-select
            v-model="formSearch.state"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item,ind) in optionStatus"
              :key="ind + '2s'"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formSearch.timeRange"
            align="right"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-pagination
      :current-page="formSearch.page"
      :page-sizes="[20, 80, 150, 300, 5]"
      :page-size="formSearch.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formSearch.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-table :key="tableKey" :data="ledgerData" border fit highlight-current-rows>
      <el-table-column label="ID" width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="具体内容" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="隐患类型" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="隐患等级" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.level }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改措施" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.measure }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改责任主体" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发现日期" width="100">
        <template slot-scope="scope">
          <span>
            {{ scope.row.created_at }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="整改日期" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.updated_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户地址" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户电话" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.phone_number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <span>
            <el-tag :type="ledgerStateFilter(scope.row.state, 'type')" effect="dark">{{ ledgerStateFilter(scope.row.state, 'content') }}</el-tag>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import clip from '@/utils/clipboard';

export default {
  data() {
    return {
      ledgerData: [],
      formSearch: {
        type_id: 0,
        level_id: 0,
        state: 0,
        timeRange: null,
        page: 1,
        limit: 20,
        total: 0,
      },
      optionTypes: [{
        type: '全部',
        id: 0,
      }, {
        type: '管路隐患',
        id: 1,
      }, {
        type: '设备隐患',
        id: 2,
      }],
      optionLevels: [{
        level: '全部',
        id: 0,
      }, {
        level: '一级',
        id: 1,
      }, {
        level: '二级',
        id: 2,
      }, {
        level: '三级',
        id: 3,
      }],
      optionAreas: [{
        label: '全部',
        id: 0,
      }, {
        label: '平山县城',
        id: 1,
      }, {
        label: '南甸镇',
        id: 2,
      }],
      optionStatus: [{
        value: 0,
        label: '全部',
      }, {
        value: 1,
        label: '未清除',
      }, {
        value: 1,
        label: '已清除',
      }],
      tableKey: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '24小时内',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          },
        },
        ],
      },
    };
  },
  created() {
    this.ledgerListData();
  },
  methods: {
    ledgerStateFilter(state, type) {
      const status = [];
      status[1] = { content: '未清除', type: 'danger' };
      status[2] = { content: '已清除', type: 'success' };
      if (type === 'type') {
        return status[state].type;
      }
      if (type === 'content') {
        return status[state].content;
      }
    },
    // 台账详情
    ledgerDetail(id) {
    },
    // 台账列表
    ledgerListData() {
      // console.log(this.formSearch);
      // alarmOrderList(this.formSearch).then(response => {
      //   if (response.code === 200) {
      //     console.log(response.data);
      //     this.alarmOrders = response.data.orders;
      //     this.formSearch.total = response.data.meta.count;
      //   }
      // }).catch(err => {
      //   console.log(err);
      // });
      this.formSearch.total = 2;
      const ledgerData = [{
        id: 1,
        content: '天然气外管路损坏',
        type_id: 1,
        type: '管路隐患',
        level_id: 2,
        level: '二级',
        measure: '更换燃气管道',
        name: '张三',
        created_at: '2020-12-20 09:01:29',
        updated_at: '2020-12-24 19:31:59',
        address: '石家庄市裕华东路39号',
        phone_number: '13366786770',
        state: 1,
      }];
      const ledgerData1 = [{
        id: 2,
        content: '煤气表损坏',
        type_id: 2,
        type: '设备隐患',
        level_id: 1,
        level: '一级',
        measure: '更换煤气表',
        name: '李四',
        created_at: '2020-12-20 09:01:29',
        updated_at: '2020-12-24 19:31:59',
        address: '石家庄市裕华东路39号-1',
        phone_number: '15373999156',
        state: 2,
      }];
      this.ledgerData = ledgerData.concat(ledgerData1);
      if (this.formSearch.type_id === 1) {
        this.ledgerData = ledgerData;
      }
      if (this.formSearch.type_id === 2) {
        this.ledgerData = ledgerData1;
      }
    },
    handleSizeChange(val) {
      this.formSearch.limit = val;
      this.dataSearch();
    },
    handleCurrentChange(val) {
      this.formSearch.page = val;
      this.dataSearch();
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    onSubmit() {
      this.formSearch.page = 1;
      this.dataSearch();
    },
    dataSearch() {
      this.ledgerListData();
    },
  },
};
</script>
<style scoped lang="scss">
.placeholder-container {
  ul {
    li {
      margin: 10px;
      list-style-type: none;
    }
  }
}
</style>
