<!-- 自定义封装弹层 -->
<template>
  <el-dialog title="路巡计划" custom-class="formDialog" :visible.sync="dialogFormVisible" width="60%" top="10vh"
             :show-close="false">
    <!-- 关闭图标 -->
    <i class="el-icon-close close-icon" @click="handleClose" />
    <!-- 自定义头部内容 -->
    <div class="edit-add-detail">
      <div class="edit-add-detail-new-content">
        <div v-loading="false" class="form-content main-table-container" element-loading-background="rgba(10 ,38 ,61, 0.95)"
             element-loading-text="数据加载中..." style="min-height: 65vh;padding: 0">
          <div class="table-container">
            <div ref="tableRef" class="table-content">
              <el-table
                ref="multipleSelection"
                v-loading="tableLoading"
                :data="tableData"
                :default-sort="getSorterDirection(params,true)"
                :max-height="tableMaxHeight"
                border
                class="table-list"
                element-loading-background="rgba(10 ,38 ,61, 0.9)"
                row-key="id"
                stripe
                @select="handleSelection"
                @selection-change="handleSelectionChange"
                @sort-change="sortChange"
              >
                <el-table-column
                  align="center"
                  type="selection"
                  width="55"
                />
                <el-table-column
                  :index="index => index + 1 + (params.pageBean.page - 1) * params.pageBean.pageSize"
                  align="center"
                  label="序号"
                  type="index"
                  width="40"
                />
                <el-table-column
                  :formatter="({roadName}) => roadName || '-'"
                  align="center"
                  label="所属路段"
                  min-width="70"
                  prop="roadName"
                  show-overflow-tooltip
                />
                <el-table-column
                  :formatter="({teamName}) => teamName || '-'"
                  align="center"
                  label="巡检队伍"
                  min-width="70"
                  prop="teamName"
                  show-overflow-tooltip
                />
                <el-table-column
                  :formatter="({startPatrolName}) => startPatrolName || '-'"
                  align="center"
                  label="开始巡检站"
                  min-width="70"
                  prop="startPatrolName"
                  show-overflow-tooltip
                />
                <el-table-column
                  :formatter="({endPatrolName}) => endPatrolName || '-'"
                  align="center"
                  label="结束巡检站"
                  min-width="70"
                  prop="endPatrolName"
                  show-overflow-tooltip
                />
                <el-table-column
                  :formatter="({inspectType}) => dictionaryEscape('wflx-xjrw', inspectType) || '-'"
                  align="center"
                  label="往返类型"
                  min-width="70"
                  prop="inspectType"
                  show-overflow-tooltip
                  sortable="custom"
                />
                <el-table-column
                  :formatter="({planType}) => dictionaryEscape('xjlx-xjrw', planType) || '-'"
                  align="center"
                  label="巡检类型"
                  min-width="70"
                  prop="planType"
                  show-overflow-tooltip
                  sortable="custom"
                />
                <el-table-column
                  :formatter="({workclass}) => dictionaryEscape('bc-xjrw', workclass) || '-'"
                  align="center"
                  label="班次"
                  min-width="60"
                  prop="workclass"
                  show-overflow-tooltip
                  sortable="custom"
                />
              </el-table>
              <pagination
                ref="paginationPanel"
                :pageResult="params.pageBean"
                style="margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="saveLoading" @click="affirmAppoint">执行计划</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {tableData} from '@/api/patrolAndRescue/roadWatch/inspectionPlan'
import {getSorterDirection,refineRequestBody} from '@/utils/requestWrappers'
import {TableMixin} from '@/mixins/tableMixin'
import { dictionaryEscape,getDictionaryByCode } from '@/utils/dictionary'
import pagination from '@/components/SuperPagination/index.vue'
import { tablePublish } from '@/api/patrolAndRescue/roadWatch/inspectionResults'
export default {
  name: 'EditAddPage',
  components: {pagination},
  mixins: [TableMixin],
  data() {
    return {
      dialogFormVisible: false,
      saveLoading: false,
      tableLoading: true,
      tableData:[],
      tableMaxHeight: '600px',
      multiselectList:[],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'IN', property: 'roadId',value:[]},
        ],
        sorter: [
          {direction: 'DESC', property: 'createTime'},
        ]
      },
    }
  },
  mounted() {
  },
  methods: {
    dictionaryEscape,
    getSorterDirection,

    open(data) {
      this.dialogFormVisible = true
      this.params.querys[0].value = data
      this.loadData()
    },
    //获取数据
    async loadData() {
      try {
        this.tableLoading = true
        const {total = 0, rows = []} = await tableData(refineRequestBody(this.params))
        this.params.pageBean.total = total
        this.tableData = rows.map(i => ({
          isEnable: i.taskStatus === 'NORMAL',
          ...i
        }))
      } finally {
        this.tableLoading = false
      }
    },
    handleSelectionChange(value){
      this.multiselectList = value.map((i)=>{
        return i.id
      })
    },
    async affirmAppoint() {
      if(this.multiselectList.length>0){
        let { state } = await tablePublish(this.multiselectList)
        if(state){
          this.dialogFormVisible = false
          this.$message.success('计划发布成功')
          this.$emit('offPage')
        }
      }else{
        this.$message.warning('请选择路巡计划！')
      }
    },
    handleClose() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-add-detail {
  padding: 10px 20px;

}
.table-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
  height: 69vh;

  .edit-add-detail-new-content,
  .form-content {
    border-radius: 5px !important;
  }
}

::v-deep .el-dialog__footer {
  background: #114066;
}

::v-deep .el-dialog__header {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: url("~@/assets/img/publicLayout/header-bg.png") no-repeat 50% 50%, linear-gradient(180deg, $--system-module-color1 0%, $--system-module-color1 100%);
  background-size: 100% 100%;
  color: $--color-white;
  padding: 0 20px;
  box-sizing: border-box;
  user-select: none;

  span {
    color: $--color-white;
  }
}


.close-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  color: $--color-white;
  cursor: pointer;
  transition: color 0.15s;

  &::before {
    font-size: 18px !important;
  }

  &:hover {
    color: $--system-hover-active-text;
  }
}
</style>
