<template>
  <div class="customer-css">
    <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners"
               width="800px" style="height: 560px;" class="customer-dialog">
      <el-container cus style="height: 355px;">
        <el-form :inline="true"  label-position="top" label-width="100px" style="margin-top: -5px;">
          <el-form-item :label="'工厂编号：'">
            <el-input v-model="pageData.site"   style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'日历编码：'">
            <el-input v-model="pageData.calendarId"   style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'日历描述：'">
            <el-input v-model="pageData.calendarDesc"   style="width: 130px"></el-input>
          </el-form-item>
        <el-table
          height="300"
          :data="calendarList"
          border
          style="width: 765px;">
<!--          <el-table-column
            header-align="center"
            align="center"
            width="50"
            label="操作">
            <template slot-scope="scope">
              <a type="text" size="small" @click="shiftModal(scope.row)">班次</a>
            </template>
          </el-table-column>-->
          <el-table-column
            v-for="(item,index) in columnCalendarOutArray" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed"
            :width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                 style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
        </el-table>
        </el-form>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCalendarExceptionData,
}from "@/api/base.js"
export default {
  data() {
    return {
      titleCon: '工作日历外',
      calendarList: [],
      columnCalendarOutArray: [
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Scheduledate',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "scheduledate",
          headerAlign: "center",
          align: "left",
          columnLabel: "日期",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Datetype',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "datetype",
          headerAlign: "center",
          align: "left",
          columnLabel: "工作日类型",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Worktime',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "worktime",
          headerAlign: "center",
          align: "right",
          columnLabel: "累计工作时间",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptexacttime1',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptexacttime1",
          headerAlign: "center",
          align: "left",
          columnLabel: "休息时间点1",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptduration1',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptduration1",
          headerAlign: "center",
          align: "right",
          columnLabel: "休息时长1",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptexacttime2',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptexacttime2",
          headerAlign: "center",
          align: "left",
          columnLabel: "休息时间点2",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptduration2',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptduration2",
          headerAlign: "center",
          align: "right",
          columnLabel: "休息时长2",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptexacttime3',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptexacttime3",
          headerAlign: "center",
          align: "left",
          columnLabel: "休息时间点3",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptduration3',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptduration3",
          headerAlign: "center",
          align: "right",
          columnLabel: "休息时长3",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptexacttime4',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptexacttime4",
          headerAlign: "center",
          align: "left",
          columnLabel: "休息时间点4",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptduration4',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptduration4",
          headerAlign: "center",
          align: "right",
          columnLabel: "休息时长4",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptexacttime5',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptexacttime5",
          headerAlign: "center",
          align: "left",
          columnLabel: "休息时间点5",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptduration5',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptduration5",
          headerAlign: "center",
          align: "right",
          columnLabel: "休息时长5",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptexacttime6',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptexacttime6",
          headerAlign: "center",
          align: "left",
          columnLabel: "休息时间点6",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 6038,
          serialNumber: '6038Table2Exceptduration6',
          tableId: "6038Table2",
          tableName: "工作日历表2",
          columnProp: "exceptduration6",
          headerAlign: "center",
          align: "right",
          columnLabel: "休息时长6",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 100
        }
      ],
      pageData: {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        calendarId: '',
        calendarDesc: '',
        scheduleDate: '',
      },
      dataListLoading: false,
    }
  },
  methods: {

    //初始化页面的参数
    init(requestData) {
      //初始化参数
      this.pageData.calendarId = requestData.calendarId;
      this.pageData.calendarDesc = requestData.calendarDesc;
      this.pageData.scheduledDate = requestData.scheduledDate;
      //刷新页面的表格数据
      this.refreshPageTable();
    },

    /*关闭modal*/
    closeDialog(){
      this.$emit('update:visible', false);
    },

    /*刷新页面的参数*/
    refreshPageTable(){
      getCalendarExceptionData(this.pageData).then(({data}) => {
        this.calendarList = data.rows
      })
    },



  },
  created() {
  }
}
</script>

<style scoped lang="scss">
.customer-css /deep/ .el-table__header th.is-leaf{
  line-height: 16px;
}

</style>
