<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="模版ID">
          <el-input v-model="formSearch.template_id" placeholder="输入模版ID"></el-input>
        </el-form-item>
        <el-form-item label="安检计划名称">
          <el-input v-model="formSearch.plan_name" placeholder="输入安检计划名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="formSearch.status"
            placeholder="请选择"
            width="40"
          >
            <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 :data="listData" border fit highlight-current-rows>
      <el-table-column label="模版ID" width="180">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.template_id,$event)">{{ scope.row.template_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="安检计划名称" width="180">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.plan_name,$event)">{{ scope.row.plan_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划描述" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程">
        <template slot-scope="scope">
          <el-steps :space="200" :active="1" finish-status="success">
            <el-step v-for="(item,index) in scope.row.step" :key="index" :title="item.title"></el-step>
          </el-steps>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="90">
        <template slot-scope="scope">
          <span>
            <el-tag :type="statusFilter(scope.row.status, 'type')" effect="dark">{{ statusFilter(scope.row.status, 'content') }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  filters: {
  },
  data() {
    return {
      listData: [],
      formSearch: {
        template_id: '',
        plan_name: '',
        status: 0,
        timeRange: null,
        page: 1,
        limit: 20,
        total: 0,
      },
      optionStatus: [{
        value: 0,
        label: '全部',
      }, {
        value: 1,
        label: '在建中',
      }, {
        value: 2,
        label: '已完成',
      }, {
        value: 3,
        label: '已派发',
      }, {
        value: 4,
        label: '禁用',
      }],
      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.listDataApi();
  },
  methods: {
    statusFilter(state, type) {
      const status = [];
      status[1] = { content: '在建中', type: 'info' };
      status[2] = { content: '已完成', type: 'warning' };
      status[3] = { content: '已派发', type: 'success' };
      status[4] = { content: '禁用', type: 'danger' };
      if (type === 'type') {
        return status[state].type;
      }
      if (type === 'content') {
        return status[state].content;
      }
    },
    // 列表
    listDataApi() {
      // 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 = 4;
      const listData = [{
        template_id: '20201218153501427460',
        plan_name: '燃气定期巡检1',
        description: '定期巡检',
        step: [{
          step: 1,
          title: '制定巡检时间',
        }, {
          step: 2,
          title: '选择区域',
        }, {
          step: 3,
          title: '确定巡检人员',
        }],
        status: 1,
        created_at: '2020-12-20 11:04:29',
      }, {
        template_id: '20201218153501427461',
        plan_name: '燃气定期巡检2',
        description: '定期巡检',
        step: [{
          step: 1,
          title: '制定巡检时间',
        }, {
          step: 2,
          title: '选择区域',
        }, {
          step: 3,
          title: '确定巡检人员',
        }, {
          step: 4,
          title: '反馈信息',
        }],
        status: 2,
        created_at: '2020-12-20 11:04:29',
      }, {
        template_id: '20201218153501427462',
        plan_name: '燃气定期巡检3',
        description: '定期巡检',
        step: [{
          step: 1,
          title: '制定巡检时间',
        }, {
          step: 2,
          title: '选择区域',
        }, {
          step: 3,
          title: '确定巡检人员',
        }, {
          step: 4,
          title: '巡检内容',
        }],
        status: 3,
        created_at: '2020-12-20 11:04:29',
      }, {
        template_id: '20201218153501427463',
        plan_name: '燃气定期巡检4',
        description: '定期巡检',
        step: [{
          step: 1,
          title: '制定巡检时间',
        }, {
          step: 2,
          title: '选择区域',
        }, {
          step: 3,
          title: '确定巡检人员',
        }, {
          step: 4,
          title: '反馈信息',
        }],
        status: 4,
        created_at: '2020-12-20 11:04:24',
      }];
      this.listData = listData;
      if (this.formSearch.template_id) {
        this.listData = [{
          template_id: '20201218153501427461',
          plan_name: '燃气定期巡检',
          description: '定期巡检',
          step: [{
            step: 1,
            title: '制定巡检时间',
          }, {
            step: 2,
            title: '选择区域',
          }, {
            step: 3,
            title: '确定巡检人员',
          }, {
            step: 4,
            title: '反馈信息',
          }],
          status: 2,
          created_at: '2020-12-20 11:04:29',
        }];
      }
    },
    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.listDataApi();
    },
  },
};
</script>
<style scoped lang="scss">
.placeholder-container {
  ul {
    li {
      margin: 10px;
      list-style-type: none;
    }
  }
}
</style>
