<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors  : 无尘
 * @LastEditTime : 2019-12-24 17:25:04
 -->

<!--
<day-field-select
  :showDayDialog="showDayDialog"
  :attenceGroupData="attenceGroupData"
  :attenceGroupId="attenceGroupId"
  @hideCycleDialog="hideCycleDialog">
</day-field-select>

import dayFieldSelect from '@/components/app/dailyAttendance/day-field-select.vue'
 -->

<template>
  <div class="custom-dialog-wrap">
    <el-dialog :title="customTitle" :visible.sync="customDialog" width="761px" :before-close="handleCardClose">
      <div class="custom-dialog__checkbox">
        <el-form ref="form" label-width="110px">
          <el-form-item v-for="(pItem, pIndex) in customData" :label="pItem.categoryName + '：'" :key="pIndex + 'cate'">
            <template v-if="!!pItem.fieldList && !!pItem.fieldList.length">
              <el-checkbox :disabled="item.editFlag" v-for="item in pItem.fieldList" v-model="item.selectFlag" :key="item.fieldId" name="type">{{ item.fieldName }}</el-checkbox>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="customCancel">取 消</el-button>
        <el-button type="primary" @click="customConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
  name: 'custom-dialog',
  props: {
    showDayDialog: {
      type: Boolean,
      default: false
    },
    customType: {
      type: String,
      default: ''
    },
    customTitle: {
      type: String,
      default: '自定义列表字段'
    }
  },
  data() {
    return {
      repProjectName: 'haoban-manage-web', // 项目名
      enterpriseId: JSON.parse(sessionStorage.getItem('userInfos')).enterpriseId,
      userId: JSON.parse(sessionStorage.getItem('userInfos')).wxUserId,
      customDialog: false, // 弹框显示
      // 复选框数据
      customData: [
        /* {
          categoryCode: 1,
          categoryName: '基本信息',
          fieldList: [
            {
              relateId: '',
              fieldId: '1',
              fieldName: '姓名',
              selectFlag: false,
              editFlag: false
            }
          ]
        } */
      ]
    };
  },
  /* eslint-disable */
  methods: {
    /**
     *   关闭
     */
    handleCardClose() {
      const that = this;
      that.customCancel();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideDayDialog');
    },

    /**
     *  确定
     */
    customConfirm() {
      const that = this;
      that.setFieldList();
    },

    /**
     *  设置字段
     */
    setFieldList() {
      const that = this;
      let fieldJson = [];
      that.customData.forEach(ele => {
        ele.fieldList.forEach(child => {
          fieldJson.push({
            enterpriseId: that.enterpriseId,
            showType: 1,
            userId:  that.userId,
            relateId: child.relateId,
            selectFlag: child.selectFlag ? 1 : 0
          })
        })
      })
      let para = {
        fieldJson: JSON.stringify(fieldJson),
        enterpriseId: that.enterpriseId,
        showType: 1,
        userId:  that.userId
      };
      postRequest('/haoban-app-attence-web/attence-field-save', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('报表有新的设置项，点击按钮更新报表内容', 'success');
            that.$emit('hideDayDialog');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     *  获取字段
     */
    getFieldList() {
      const that = this;
      let para = {
        enterpriseId: that.enterpriseId,
        userId: that.userId,
        showType: 1
      };

      postRequest('/haoban-app-attence-web/attence-show-field-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.forEach(ele => {
              if (!!ele.fieldList) {
                ele.fieldList.forEach(child => {
                  child.selectFlag = child.selectFlag == 1? true : false;
                  child.editFlag = child.editFlag == 1? true : false;
                })
              }
            })
            that.customData = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    showDayDialog: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
      that.getFieldList();
    },
    customType: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.getCardList();
      }
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.showDayDialog;
    that.getFieldList();
  }
};
</script>

<style lang="scss" scoped>
.custom-dialog {
  &-wrap {
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }

  &__p {
    width: 100%;
    font-size: 14px;
    color: #606266;

    span {
      color: #2f54eb;
    }
  }

  &__checkbox {
    width: 100%;
    min-height: 100px;
    max-height: 300px;
    padding-top: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;

    .el-checkbox {
      width: 22%;
      margin-left: 16px;
      // line-height: 62px;
      &.is-checked {
        >>> .el-checkbox__label {
          color: #2f54eb;
        }
      }
    }
  }
}
</style>
