<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-11 10:44:48
 -->
<template>
  <div class="app-detail-wrap">
    <div class="task-set-content boder-box">
      <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="任务标题" prop="taskTitle">
          <limitInput :inputWidth="372" :disflag="$route.query.sessionTaskId ? true : false" :inputValue.sync="formData.taskTitle" :getByType="'word'" :holder="'请输入任务标题'" :maxLength="20"> </limitInput>
        </el-form-item>
        <el-form-item label="任务内容" prop="taskContent">
          <limit-textarea :inputWidth="372" :inputValue.sync="formData.taskContent" :holder="'请输入任务内容'" :getByType="'word'" :maxLength="200"></limit-textarea>
        </el-form-item>
        <!--<el-form-item label="使用说明" prop="useDescript">
          <el-radio v-model="formData.radio" label="1">所有好友会员</el-radio>
          <el-radio v-model="formData.radio" label="2">非会员好友</el-radio>
        </el-form-item>-->
        <el-form-item label="添加好友时间" prop="addTimeType">
          <el-radio v-model="formData.addTimeType" label="1">近一个月</el-radio>
          <el-radio v-model="formData.addTimeType" label="2">近一周</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认{{ $route.query.sessionTaskId ? '编辑' : '新建' }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { postRequest } from '@/api/api';
export default {
  name: 'reviewed',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      activeTab: '1',
      activeId: '1',
      activeBrand: this.brandId, // 商户(品牌) id
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      createName: !!localStorage.getItem('userInfos') && !!JSON.parse(localStorage.getItem('userInfos')).staffDTO ? JSON.parse(localStorage.getItem('userInfos')).staffDTO.staffName : '',
      formData: {
        taskTitle: '',
        taskContent: '',
        addTimeType: '1'
      },
      rules: {
        taskTitle: [{ required: true, message: '请输入任务标题', trigger: 'blur' }],
        taskContent: [{ required: true, message: '请输入任务内容', trigger: 'blur' }]
      }
    };
  },
  computed: {},
  methods: {
    /**
     * 保存
     */
    submitForm: _debounce(function(formName) {
      let that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        }
      });
    }, 500),
    postSave() {
      let that = this;
      let para = {
        taskTitle: that.formData.taskTitle,
        taskContent: that.formData.taskContent,
        addTimeType: that.formData.addTimeType,
        wxEnterpriseId: that.wxEnterpriseId,
        createName: that.createName
      };
      postRequest('/haoban-app-tel-task-three-web/create-session-task', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('保存成功', 'success');
            that.$router.push('/taskList');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取设置数据
     */
    getData() {
      let that = this;
      let para = {
        enterpriseId: that.activeBrand,
        taskType: 1
      };
      postRequest('/haoban-app-tel-task-three-web/find-task-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.relaxTaskJudge = resData.result.relaxTaskJudge == 1 ? true : false;
            that.setObj = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeBrand = newData;
      }
    }
  },
  mounted() {
    let that = this;
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.$emit('showTab', '3');
    if (!!that.brandId) {
      // that.getData();
    }
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: { limitInput, limitTextarea }
};
</script>
<style type="text/scss" lang="scss" scoped>
.w-100 {
  width: 100px;
}
.vertical-top {
  vertical-align: top;
}
.task-set-content {
  padding: 30px;
  .task-set-cell {
    /* padding: 30px 0; */
    .el-date-editor.el-input {
      width: 118px;
    }
  }
  .set-line-item {
    margin-bottom: 20px;
    table {
      tr {
        td {
          padding: 17px 30px;
          border: 1px solid #ebeef5;
        }
      }
    }
    .set-line-item_title {
      display: inline-block;
      width: 120px;
      &.w-320 {
        width: 320px;
        i {
          font-style: normal;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>
