<template>
  <div>
    <Row>
      <Input placeholder="假种名称" v-model="searchForm.wmName" style="width: 200px"/>
      <Button
        :loading="searchLoading"
        @click="doInitSearch"
        style="margin-left: 8px;"
        type="primary"
      >查询</Button>
      <Button
        :disabled="searchLoading"
        @click="addModal"
        ghost
        icon="md-add"
        style="margin-left: 8px;"
        type="primary"
        v-permission:add
      >新建</Button>
    </Row>
    <br />
    <Table :columns="columns" :data="list" :loading="searchLoading" border></Table>
    <br />
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      show-total
    />
    <Modal
      :mask-closable="false"
      @on-cancel="onVisibleChange"
      :title="modalTitle"
      v-model="showModal"
      width="600"
    >
      <Form
        :label-width="80"
        :model="validateForm"
        :rules="ruleValidate"
        class="ask-leave-form"
        ref="formValidate"
      >
        <FormItem label="所属中心" prop="wmSiteId">
          <Select style="width: 200px;" v-model="validateForm.wmSiteId" :disabled="isDisabled">
            <Option
              :key="index"
              :value="item.wmSiteId"
              v-for="(item ,index) in SITE_ITEM"
            >{{item.wmName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="假种名称" prop="wmName">
          <Input style="width: 200px;" v-model="validateForm.wmName" :disabled="isDisabled"/>
        </FormItem>
        <FormItem label="是否付薪" prop="wmPaid">
          <Checkbox v-model="validateForm.wmPaid" :disabled="isDisabled"></Checkbox>
        </FormItem>
        <FormItem label="备注" prop="wmRemarks">
          <Input
            :disabled="isDisabled"
            :autosize="{minRows: 4,maxRows: 6}"
            :maxlength="200"
            placeholder="备注..."
            type="textarea"
            v-model="validateForm.wmRemarks"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <div v-if="showFooter">
        <Button @click="resetForm">重置</Button>
        <Button :loading="confirmLoading" @click="confirmComplaint" type="primary">确定</Button>
        </div>
      </div>
    </Modal>
    <!-- <Modal :mask-closable="false" :title="`请假申请状态 - ${timelineStateDesc}`" v-model="showTimeline">
      <Timeline>
        <custom-timeline-item
          :date="formatDate(item.approvalTime)"
          :key="index"
          :passed="index !== timelineList.length - 1 || timelineState !== 1"
          :roleName="item.map.linkType"
          :state="item.map.status"
          :username="item.map.linkOperateName"
          v-for="(item, index) in timelineList"
        />
      </Timeline>
      <div slot="footer">
        <Button @click="showTimeline=false" type="primary">确定</Button>
      </div>
    </Modal> -->
  </div>
</template>

<script>
import showPoptip from '@/mixin/showPoptip'
import commonList from '@/mixin/commonList'
import dateLimit from '@/mixin/dateLimit'
import timeline from '@/mixin/timeline'
import ShiftsAPI from '@api/common/shifts'
import WmSitesAPI from '@api/common/wmSites'
import WmShiftsTypeAPI from '@api/common/wmShiftsType'
import TimeoffTypeAPI from '@api/common/timeoffType'
import FileAPI from '@api/sys/file'
import { addHours, addMinutes, differenceInDays, getTime } from 'date-fns'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'leave-setting',
  mixins: [commonList, timeline, dateLimit, showPoptip],
  data () {
    return {
      SITE_ITEM: [],
      SITE_ITEM: [],
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 150,
          align: 'center'
        },
        {
          title: '所属中心',
          //width: 150,
          key: 'siteName'
        },
        {
          title: '假种名称',
          //width: 150,
          key: 'wmName'
        },
        {
          title: '是否付薪',
          //width: 150,
          key: 'wmPaid'
        },
        
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            //console.log(params);
            return h('div', [
              h(
                'Button',
                {
                  // directives: [
                  //   {
                  //     name: 'permission',
                  //     arg: 'view',
                  //     value: 'trajectory-model'
                  //   }
                  // ],
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.infoView(params.row)
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  // directives: [
                  //   {
                  //     name: 'permission',
                  //     arg: 'edit',
                  //     value: 'trajectory-model'
                  //   }
                  // ],
                  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.infoRemove(params.row)
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      // directives: [
                      //   {
                      //     name: 'permission',
                      //     arg: 'delete',
                      //     value: 'trajectory-model'
                      //   }
                      // ],
                      props: {
                        type: 'warning',
                        size: 'small'
                      }
                    },
                    '删除'
                  )
                ]
              )
            ])
          }
        }
      ],
      list: [],
      searchForm: {
        pageNum: 1,
        pageSize: this.$config.PAGE_SIZE,
        wmName: null,
      },
      total: 0,
      current: 0,
      // form
      showModal: false,
      confirmLoading: false,
      showFooter: true,
      modalTitle: '新增假种',
      isDisabled: false,
      validateForm: {
        wmName: '',
        wmRemarks: '',
        wmSiteId: '',
        wmPaid: '',
        wmTimeoffTypeId: ''
      },
      ruleValidate: {
        wmSiteId: [
          {
            required: true,
            message: '请选择',
            //trigger: 'change'
          }
        ],
        // wmPaid: [
        //   {
        //     required: true,
        //     message: '选择是否付薪',
        //     //trigger: 'change'
        //   }
        // ],  
        wmName: [
          {
            required: true,
            message: '请填写',
            trigger: 'change'
          }
        ],
        wmRemarks: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ]
      },
      deepCloneData: {}
    }
  },
  created () {
    // 获取所在重中心
    WmSitesAPI.listOwer().then(({ data }) => {
      console.log('data', data)
      if (data.code === 200) {
        if (data.data && data.data.length > 0) {
          this.SITE_ITEM = data.data
          console.log('123',this.SITE_ITEM);
        }
      }
    })
  },
  methods: {
    doInitSearch () {
      this.searchForm.pageNum = 1
      this.doSearch()
    },
    pageChange (pageNum) {
      this.searchForm.pageNum = pageNum
      this.doSearch()
    },
    doSearch () {
      this.searchLoading = true
      //_this = this
      // this.$nextTick(() => {
        console.log(this.searchForm);
        TimeoffTypeAPI.timeoffTypeList({ ...this.searchForm })
            .then(({ data }) => {
              //console.log(data);
              this.searchLoading = false
              if (data.status === 'success') {
                this.list = data.data.list.map(item => {
                  item.wmName = item.wmName
                  item.wmPaid = item.wmPaid?'是':'否'
                  item.siteName = item.map.siteName
                  return item
                })
                //this.list = data.data.list
                this.total = data.data.total
              }
            })
            .catch(err => {
              console.error('err:', err)
              this.searchLoading = false
            })
      // })
    },
    onVisibleChange(){
      //this.resetForm()
      this.$refs['formValidate'].resetFields()
    },
    confirmComplaint () {
      //console.log(this.validateForm);
      // debugger;
      this.$refs['formValidate'].validate(valid => {
        console.log(valid);
        if (valid) {
          this.confirmLoading = true
          var params = {}
          params.wmName = this.validateForm.wmName
          params.wmRemarks = this.validateForm.wmRemarks
          params.wmSiteId = this.validateForm.wmSiteId
          if(this.validateForm.wmPaid == true){
            params.wmPaid = 1
          }else{
            params.wmPaid = 0
          }
          
          params.wmTimeoffTypeId = this.validateForm.wmTimeoffTypeId

          console.log(params);
          TimeoffTypeAPI.saveTimeoffTypes(params)
            .then(({ data }) => {
              this.confirmLoading = false
              if (data.status === 'success') {
                this.showModal = false
                this.$refs['formValidate'].resetFields()
                this.$Message.success('提交成功')
                this.doInitSearch()
              }
            })
            .catch(err => {
              console.error('err', err)
              this.confirmLoading = false
            })
        }
      })
    },
    resetForm () {
      //this.$refs['formValidate'].resetFields()
      this.validateForm = cloneDeep(this.deepCloneData)
      this.validateForm.wmPaid = false
    },
    addModal(){//新建假种
      this.validateForm = []
      this.modalTitle = '新增假种'
      this.showModal = true
      this.isDisabled = false // 指标是否可编辑
      this.showFooter = true // 是否显示底部操作按钮
    },
    // 表格操作-查看
    infoView (row) {
      let infoId = row.wmTimeoffTypeId
      this.viewLoading = true
      this.modalTitle = '查看假种'
      TimeoffTypeAPI.info({'wmTimeoffTypeId':infoId})
        .then(({ data }) => {
          console.log("data",data);
          this.viewLoading = false
          if (data.status === 'success') {
            this.showModal = true
            this.isDisabled = true // 指标是否可编辑
            this.showFooter = false // 是否显示底部操作按钮
            let oj ={}
            oj.wmName = data.data.wmName
            oj.wmRemarks = data.data.wmRemarks
            oj.wmSiteId = data.data.wmSiteId
            oj.wmPaid = data.data.wmPaid?true:false
            this.validateForm = oj
            this.deepCloneData = cloneDeep(oj)
            //console.log(this.validateForm);
          }
        })
        .catch(err => {
          console.error(err)
          this.viewLoading = false
        })
    },
    // 表格操作-编辑
    infoEdit (row) {
      this.editLoading = true
      this.modalTitle = '编辑假种'
      let infoId = row.wmTimeoffTypeId
      TimeoffTypeAPI.info({'wmTimeoffTypeId':infoId})
        .then(({ data }) => {
          console.log("data",data);
          this.viewLoading = false
          if (data.status === 'success') {
            this.showModal = true
            this.isDisabled = false // 指标是否可编辑
            this.showFooter = true // 是否显示底部操作按钮
            let oj ={}
            oj.wmName = data.data.wmName
            oj.wmRemarks = data.data.wmRemarks
            oj.wmPaid = data.data.wmPaid?true:false
            oj.wmSiteId = data.data.wmSiteId
            oj.wmTimeoffTypeId = infoId
            this.validateForm = oj
            this.deepCloneData = cloneDeep(oj)
            console.log(this.validateForm);
          }
        })
        .catch(err => {
          console.error(err)
          this.viewLoading = false
        })
    },
    // 表格操作-删除
    infoRemove (row) {
      let infoId = row.wmTimeoffTypeId.toString()
      this.deleteLoading = true
      TimeoffTypeAPI.delete({'wmTimeoffTypeId':infoId})
        .then(({ data }) => {
          this.deleteLoading = false
          if (data.status === 'success') {
            this.$Message.destroy()
            this.$Message.success('删除成功!')
            this.doInitSearch()
          }
        })
        .catch(err => {
          console.error('err: ', err)
          this.deleteLoading = false
        })
    },
  }
}
</script>

<style lang="less" scoped>
.upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.upload-list img {
  width: 100%;
  height: 100%;
}
.upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
  display: block;
}
.upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.warnInfo {
  padding: 8px 5px 8px 38px;
}
</style>
