<!-- 工位监控 -->
<template>
  <div class>
    <Row align="middle" type="flex">
      <Col class-name="align-left" span="18">
        <Input
          :disabled="false"
          :maxlength="20"
          placeholder="工位地图名称"
          style="width:200px;margin-right:10px"
          v-model="stationName"
        ></Input>
        <Select
          @on-clear="clearSearConditionn"
          clearable="true"
          placeholder="所属中心"
          style="margin-left: 2px; width:150px"
          v-model="centerSelect"
        >
          <Option
            :key="index"
            :value="item.id"
            v-for="(item,index) in optionsForCenter"
          >{{item.name}}</Option>
        </Select>
        <Button
          :loading="searchLoading"
          @click="doInitSearch"
          style="margin-left: 8px;"
          type="primary"
        >查询</Button>
        <!-- <Button
          :disabled="searchLoading"
          @click="InfoAdd"
          ghost
          icon="md-add"
          style="margin-left: 8px;"
          type="primary"
        >新增</Button>-->
      </Col>
    </Row>
    <br />
    <Table :columns="columnsDaily" :data="dataList" :loading="searchLoading" border></Table>
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      class="mt-set16"
      show-total
    />

    <Modal
      :footer-hide="true"
      :mask-closable="false"
      :styles="{top: '5px'}"
      :title="modalTitle"
      :width="1200"
      @on-visible-change="visibilityChange"
      ok-text="保存"
      v-model="isShow"
    >
      <monitor-info :isShowModal="isShow" :mapInfo="mapInfo" :openState="openState" v-if="isShow"></monitor-info>
    </Modal>
  </div>
</template>

<script>
import WfmStationAPI from '@api/common/wfmStation'
import commonList from '@/mixin/commonList'
import monitorInfo from './monitor-info'
import WfmOrgAPI from '@api/common/wfmOrg'

export default {
  name: 'seat-map',
  mixins: [commonList],
  components: { monitorInfo },
  data () {
    return {
      searchLoading: false,
      mapInfo: {},
      searchForm: {
        pageNum: 1,
        pageSize: this.$config.PAGE_SIZE,
        startTime: null,
        endTime: null
      },
      openState: -1, // 0:查看，1：增加，2：修改,-1关闭
      optionsForCenter: [],
      searchDateRange: null,
      total: 0,
      current: 0,
      stationName: '',
      selectedRowId: '',
      isShow: false,
      centerSelect: '',
      dataList: [],
      columnsDaily: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center'
        },
        {
          title: '工位地图名称',
          key: 'stationName',
          render (h, params) {
            return h('div', params.row.stationName)
          }
        },
        {
          title: '所属中心',
          key: 'wmName',
          render (h, params) {
            return h('div', params.row.map.wmName)
          }
        },
        {
          title: '创建人',
          key: 'name',

          render (h, params) {
            return h('div', params.row.map.name)
          }
        },
        {
          title: '创建时间',
          key: 'mapCreateTime',

          render (h, params) {
            return h('div', params.row.map.mapCreateTime)
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.InfoShow(params.row)
                    }
                  }
                },
                '查看'
              )
              // h(
              //   'Button',
              //   {
              //     props: {
              //       type: 'success',
              //       size: 'small'
              //     },
              //     style: {
              //       marginRight: '5px'
              //     },
              //     on: {
              //       click: () => {
              //         this.InfoEdit(params.row)
              //       }
              //     }
              //   },
              //   '编辑'
              // ),
              // h(
              //   'Poptip',
              //   {
              //     props: {
              //       confirm: true,
              //       transfer: true,
              //       title: '确定删除吗？'
              //     },
              //     on: {
              //       'on-ok': () => {
              //         this.delete(params.row)
              //       }
              //     }
              //   },
              //   [
              //     h(
              //       'Button',
              //       {
              //         style: {
              //           'margin-left': '4px'
              //         },
              //         props: {
              //           type: 'warning',
              //           size: 'small'
              //         }
              //       },
              //       '删除'
              //     )
              //   ]
              // )
            ])
          }
        }
      ],
      colUserName: {
        title: '座席',
        key: 'username',

        render (h, params) {
          return h(
            'div',
            params.row.username
            // params.row.username === undefined ? '无' : params.row.username
          )
        }
      },
      colUsercode: {
        title: '员工编号',
        key: 'usercode',
        width: 100
      },
      indicatorNameArray: [],
      indicatorValueArray: [],
      pieChartData: [],
      lastSearchState: 'checkBoth',
      modalTitle: '工位监控 - 查看'
    }
  },
  mounted () {},
  watch: {},
  created () {
    this.optionsForCenter = []
    this.centerSelect = null
    const parentId = ''
    const type = '1'
    WfmOrgAPI.orgTreeAuth({ parentId, type })
      .then(({ data }) => {
        if (data.status === 'success') {
          if (data.data && data.data.length > 0) {
            this.optionsForCenter = data.data
          }
        }
      })
      .catch(err => {
        console.error('err:', err)
      })
  },
  methods: {
    clearSearConditionn () {
      this.centerSelect = null
      this.searchForm.stationSiteId = null
    },
    pageChange (pageNum) {
      this.searchForm.pageNum = pageNum
      this.doSearch()
    },
    InfoShow (row) {
      this.openState = 0
      this.isShow = true
      this.mapInfo = row
    },
    // 查询结果
    doSearch () {
      this.searchLoading = true
      this.$nextTick(() => {
        this.dataList = []
        this.searchForm.stationName = this.stationName
        if (this.centerSelect) {
          this.searchForm.stationSiteId = this.centerSelect.split('_')[1]
        }
        WfmStationAPI.viewList({ ...this.searchForm })
          .then(({ data }) => {
            if (data.status === 'success') {
              this.searchLoading = false
              this.total = data.data.total
              this.dataList = data.data.list
            }
          })
          .catch(() => {
            this.searchLoading = false
          })
      })
    },
    visibilityChange (state) {
      if (!state) {
        this.openState = -1
        this.isShow = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
