<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-05 15:30:40
 -->
<!--
<multiple-del
  :showDialog="showDialog"
  :detailFlag="true"           # true/false 是否是详情页，判断一个选项用
  @hideDialog="hideDialog">
</multiple-del>
 -->
<template>
  <div v-show="customDialog">
    <el-dialog class="app-dialog" title="批量删除" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div v-if="showTip">
        <div role="alert" class="el-alert el-alert--info flex flex-align-start">
          <i class="el-alert__icon el-icon-info"></i>
          <div class="el-alert__content">
            <span class="el-alert__title">
              删除任务后，会影响任务统计如已完成，完成率，待完成等，请知悉
            </span>
          </div>
        </div>
      </div>
      <!-- <div class="app-dialog-body p-l-15"> -->
      <!-- <div slot="title">
        <span>批量删除</span>
        <span style="color:#2f54eb;font-size:10px;padding-left:10px;" v-if="showTip">删除任务后，会影响任务统计如已完成，完成率，待完成等，请知悉</span>
      </div> -->
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px" @submit.native.prevent>
        <el-form-item v-if="showTab" label="">
          <el-radio v-model="formData.delOptFlag" label="0">仅删除逾期任务</el-radio>
          <el-radio v-model="formData.delOptFlag" label="1">删除所有待完成任务</el-radio>
        </el-form-item>
        <!-- <div v-if="detailShowFlag" class="el-message-box__title">
            <div class="el-message-box__status el-icon-warning"></div>
            <span>仅可删除历史月份逾期未完成任务</span>
          </div> -->
        <el-form-item label="原因备注" prop="reason">
          <limit-textarea class="mult-del-textarea" :inputWidth="450" :inputValue.sync="formData.reason" :holder="''" :getByType="'char'" :maxLength="50"> </limit-textarea>
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="customCancel">取 消</el-button>
        <el-button type="primary" @click="customConfirm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import limitTextarea from '@/components/limit-textarea.vue';
export default {
  name: 'multiple-del',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    showTab: {
      type: Boolean,
      default: true
    },
    detailFlag: {
      type: Boolean,
      default: false
    },
    detailShowFlag: {
      type: Boolean,
      default: false
    },
    showTip: {
      type: Boolean,
      default: false
    }
  },
  components: {
    limitTextarea
  },
  data() {
    return {
      repProjectName: 'haoban-manage-web', // 项目名
      customDialog: false, // 弹框显示
      rules: {
        reason: [{ required: true, message: '请输入原因内容', trigger: 'blur' }]
      },
      formData: {
        delOptFlag: '0',
        reason: ''
      }
    };
  },
  methods: {
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$refs['form'].resetFields();
      that.$emit('hideDialog', {});
    },

    /**
     *  确定
     */
    customConfirm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          // if (that.showTip) {
          //   that.secondConfirm();
          //   return true;
          // }
          that.$emit('hideDialog', that.formData);
        } else {
          return false;
        }
      });
    },
    secondConfirm() {
      const that = this;
      this.$confirm('<div>确定要删除吗？</div><div>删除任务后，会影响任务统计如已完成，完成率，待完成等，请知悉</div>', '', {
        customClass: 'top-icon',
        closeOnClickModal: false,
        dangerouslyUseHTMLString: true,
        showClose: false,
        type: 'warning'
      })
        .then(res => {
          that.$emit('hideDialog', that.formData);
        })
        .catch(() => {});
    }
  },
  watch: {
    showDialog: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
      that.formData.reason = '';
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.showDialog;
    that.formData.reason = '';
  }
};
</script>

<style lang="scss" scoped>
.el-message-box__title {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  .el-message-box__status {
    position: relative;
    top: auto;
    padding-right: 5px;
    text-align: center;
    transform: translateY(3px);
  }
  span {
    font-size: 14px;
    line-height: 20px;
    color: #606266;
  }
}
.tip-text {
  color: #2f54eb;
  font-size: 10px;
}
.el-alert--info {
  width: 100%;
  font-size: 14px;
  color: #606266;
  background: rgba(240, 245, 255, 1);
  border-radius: 2px;
  border: 1px solid rgba(133, 165, 255, 1);
  .el-icon-info {
    width: 12px;
    font-size: 12px;
    color: #2f54eb;
    align-self: flex-start;
    padding-top: 3px;
  }
}
</style>
