<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-select
              v-model="defectNo"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="站点1" value="1"></el-option>
              <el-option label="站点2" value="2"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            缺陷等级:
            <el-select
              v-model="defectLevel"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="缺陷等级1" value="1"></el-option>
              <el-option label="缺陷等级2" value="2"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            提交人:
            <el-select
              v-model="submiter"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="提交人1" value="1"></el-option>
              <el-option label="提交人2" 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="defectNo"
        label="缺陷编号"
        width=""
      ></el-table-column>
      <el-table-column
        prop="defectDes"
        label="缺陷描述"
        width=""
      ></el-table-column>
      <el-table-column  label="照片" width="">
         <template #default="scope">
           <!-- <img src='@/assets/images/logo.png'  width="40" height="40" alt=""> -->
           <img :src="scope.row.imgUrl" width="26" height="26" />
        </template>
      </el-table-column>
      <el-table-column
        prop="defectLevel"
        label="缺陷等级"
        width=""
      ></el-table-column>
      <el-table-column prop="siteName" 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
        prop="submitTime"
        label="提交时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="submiter"
        label="提交人"
        width=""
      ></el-table-column>
      <el-table-column
        prop="completionTime"
        label="完成时间"
        width=""
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
          @click="addItem()"
            type="text"
            size="small"
            class="delete-text"
          >
            新建工单
          </el-button>

          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </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 {
      currentPage4: 4,
      showDialog: false,
      submiter: '',
      defectNo: '',
      defectLevel: '',
      tableData: [
        {
          defectNo: 'cszd1',
          defectDes: '电缆孔洞 ',
          photo: '照片图片',
          defectLevel: '一级',
          siteName: '测试站点a',
          status: '未执行',
          submitTime: '2021-09-27 14:38:34',
          submiter: '张三',
          completionTime: '2021-09-27 14:38:34',
          imgUrl:'@/assets/images/logo.png'
        },
        {
          defectNo: 'cszd1',
          defectDes: '电缆孔洞 ',
          photo: '照片图片',
          defectLevel: '一级',
          siteName: '测试站点a',
          status: '已执行',
          submitTime: '2021-09-27 14:38:34',
          submiter: '张三',
          completionTime: '2021-09-27 14:38:34',
          imgUrl:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF7WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0YjhlOWQzYi04MDA0LTYyNDYtYWIzOS00NjI4MmUxZGI2YjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTU0NUFCOENGQjM2MTFFQkE5NkQ4NDcwOTYzNTA5MEYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OWViYTk5Y2EtNDhiNi0wZDQ4LTllZTQtM2JiODNlN2JlNjU1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcDpD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'
        },
      ],
    }
  },
  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: '',
        defectNo: '',
        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>
