<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
      <div class="left">
        <div>
          <a class="" style="margin-right: 30px">缺陷管理</a>
          <el-button icon="el-icon-plus" type="success" @click="addItem()">
            新增
          </el-button>
        </div>

        <div style="margin-top: 20px">
          <div class="filter-item">
            选择时间范围：
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: auto"
            ></el-date-picker>
          </div>
          <div class="filter-item">
            状态:
            <el-select
              v-model="region"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="已执行" value="1"></el-option>
              <el-option label="未执行" value="2"></el-option>
            </el-select>
          </div>
          <el-button type="primary" icon="el-icon-search" class="search-button">
            搜索
          </el-button>
        </div>
      </div>

      <div class="right">
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column prop="xh" label="序号" width=""></el-table-column>
      <el-table-column
        prop="siteName"
        label="站点名称"
        width=""
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="开始停电时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="endTime"
        label="结束停电时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="subTime"
        label="提交时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="submitter"
        label="提交人"
        width=""
      ></el-table-column>
      <el-table-column prop="status" label="状态" width="">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.status == '已执行'
                  ? '#8DCF6E'
                  : scope.row.status == '未执行'
                  ? '#FF747B'
                  : '#5c88fa',
            }"
          >
            {{ scope.row.status }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            type="text"
            size="small"
            class="delete-text"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      v-if="showDialog"
      ref="dialogComponent"
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import DialogComponent from './dialogComponent'

export default {
  name: 'VariableList',

  components: { DialogComponent },

  data() {
    return {
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      select: 1,
      currentPage4: 4,

      showDialog: false,
      tabPosition: 'one',

      input: '',
      region: '',
      tableData: [
        {
          xh: '1',
          siteName: '测试站点1',
          startTime: '2020-02-02 12:00:00',
          endTime: '2020-02-02 12:00:00',
          subTime: '2020-02-02 12:00:00',
          submitter: '张三',
          status: '未执行',
        },
        {
          xh: '1',
          siteName: '测试站点1',
          startTime: '2020-02-02 12:00:00',
          endTime: '2020-02-02 12:00:00',
          subTime: '2020-02-02 12:00:00',
          submitter: '张三',
          status: '未执行',
        },
        {
          xh: '1',
          siteName: '测试站点1',
          startTime: '2020-02-02 12:00:00',
          endTime: '2020-02-02 12:00:00',
          subTime: '2020-02-02 12:00:00',
          submitter: '张三',
          status: '未执行',
        },
        {
          xh: '1',
          siteName: '测试站点1',
          startTime: '2020-02-02 12:00:00',
          endTime: '2020-02-02 12:00:00',
          subTime: '2020-02-02 12:00:00',
          submitter: '张三',
          status: '执行中',
        },
        {
          xh: '1',
          siteName: '测试站点1',
          startTime: '2020-02-02 12:00:00',
          endTime: '2020-02-02 12:00:00',
          subTime: '2020-02-02 12:00:00',
          submitter: '张三',
          status: '已执行',
        },
      ],
    }
  },
  methods: {
    //处理状态状态值变色
    cellStyle(row, column, rowIndex, columnIndex) {
      console.log('rowIndex', row, column, rowIndex, columnIndex)
      console.log(row.row.status)
      console.log(row)
      if (row.column.status == '未执行') {
        return 'color:#FF747B'
      }
      if (row.column.label == '已执行') {
        return 'color:#8DCF6E'
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 表头样式设置
    goVariableList() {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    },
    headClass() {
      return 'background:#FAFAFA;'
    },

    // 添加操作
    addItem() {
      this.tableItem = {
        id: '',
        stationName: '',
        xh: '',
        siteName: '',
        siteList: [],
        done: '',
        guaZai: '',
        checked: true,
      }
      this.dialogTitle = '新增'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true
      })
    },
    // 编辑操作
    editRow(row) {
      console.log(row)
      this.tableItem = row
      this.dialogTitle = '编辑'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true
      })
    },
    // 关闭操作
    closeDialog(flag) {
      if (flag) {
        // 重新刷新表格内容
        this.fetchData()
      }
      this.showDialog = false
    },

    //删除操作
    handleDelete(index, row) {
      console.log(index, row)
      alert(index)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
