<template>
  <div>
    <el-button :type="data.status === '结束' ||  data.status === '发布'?'':'primary'" :disabled="data.status === '结束' ||  data.status === '发布' "  size="mini" @click="onShow(dialogFormVisible = true)">编 辑</el-button>
    <el-drawer append-to-body title="编辑模板" :visible.sync="dialogFormVisible" size="800px" :show-close="false">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="80px" size="small">
            <el-col :span="24">
              <el-form-item label="模板名称" prop="title">
                <el-input type="text" v-model="form.title" placeholder="输入提报标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提报要求" >
                <el-input type="text" v-model="form.remarks" placeholder="输入提报要求"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提报类型" prop="isrepeat">
                <el-radio-group v-model="form.isrepeat" @change="onRadioChange">
                  <el-radio :label="1">月度提报</el-radio>
                  <el-radio :label="0">单次提报</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.isrepeat">
              <el-form-item label="设置周期" prop="periodpoint">
                <div class="submit__date_List">
                  <div class="list_title flex-align-center">
                    <p style="width:150px;flex:1 0 auto">开始时间</p>
                    <p>截止时间</p>
                  </div>
                  <div v-for="(item,index) in sdList" :key="index" class="flex-align-center mt-10">
                    <el-input v-model="item.periodpoint" placeholder="输入日期" @change="onDateChange" size="small">
                       <template slot="prepend">每月</template>
                    </el-input>&nbsp;
                    <el-input v-model="item.taskday" @change="onDateChange" size="small" placeholder="请输入周期天数"></el-input>&emsp;
                    <el-button size="small" type="text" @click="deleteperiod(index)">删 除</el-button>
                  </div>
                  <div class="flex-align-center">
                    <el-button size="small" type="text" @click="addperiod">添 加</el-button>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-else>
              <el-form-item label="设置周期" prop="taskdays">
                <div class="submit__date_List">
                  <div class="list_title flex-align-center">
                    <p>开始时间</p>
                    <p>截止时间</p>
                  </div>
                  <div class="flex-align-center">
                    <el-date-picker
                      style="width:150px;flex:1 0 auto"
                      type="date"
                      v-model="form.begdate"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                      @change="onDateChange">
                    </el-date-picker>&nbsp;
<!--                    <el-input v-model="addDate.taskday" @change="onDateChange" size="small" placeholder=""></el-input>-->
                    <el-date-picker
                        style="width:150px;flex:1 0 auto"
                        type="date"
                        v-model="form.enddate"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        @change="onDateChange">
                    </el-date-picker>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发布范围" prop="roles">
                <el-select style="width:100%" v-model="form.roles" placeholder="请选择角色" multiple>
                  <el-option
                      v-for="item in rolelist"
                      :key="item.roleid"
                      :label="item.rolename"
                      :value="item.roleid"
                  >
                    <span style="float: left">{{ item.rolename }}</span>
                    <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {   
    var validatePass2 = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请设置提报周期'));
      } else {
        if (this.form.isrepeat){
          let length = this.form.taskdays.length
          for (let i=0;i<length;i++){
            if (this.form.periodpoint[0] >this.form.taskdays[i]){
              callback(new Error('截止时间不能早于开始时间'))
              break
            }
          }
          callback()
        }else {
          if (this.form.begdate > this.form.enddate){
            callback(new Error('截止时间不能早于开始时间'));
          }else {
            callback();
          }
        }
      }
    }; 
    return {
      error:false,
      dialogFormVisible:false,
      visible:false,
      form:{
        sa_salesforecastmodelid:0,
        title:'',
        remarks:'',
        begdate:null,
        enddate:null,
        periodtype:'周',
        periodpoint:[],
        baseonproject:false,
        isrepeat:1,
        taskdays:[],
        sales:[],
        roles:[],
      },
      period:7,
      act:0,
      rolelist:[],
      rules:{
        title: [
          { required: true, message: '请输入提报标题', trigger: 'blur' },
        ],
        roles: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        periodpoint:[
          { required: true, validator: validatePass2, trigger: 'change' }
        ],
        taskdays:[
          { required: true, validator: validatePass2, trigger: 'change' }
        ],
        isrepeat:[
          { required: true, message: '请选择提报类型', trigger: 'change' }
        ]
      },
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 3600 * 1000;
        }
      },
      sdList:[],
      nsdList:[],
      addDate:{
        periodpoint:'',
        taskday:'',
      },
      value:''

    }
  },
  methods:{
    onShow () {
      this.queryRoles()
      if (this.data.isrepeat === 1) {
        this.data.periodpointchange.forEach(e=>{
          this.sdList.push({
            periodpoint:e,
            taskday:'',
          })
        })
        this.sdList.forEach(e=>{
          this.data.taskdayschange.forEach(t=>{
            e.taskday = t
          })
        })
      } else {
        this.addDate.taskday = this.data.taskdayschange[0]
      }
      this.form = Object.assign({},this.form, this.data)
      this.form.roles = this.form.roles.map(e=>{
        return e.roleid
      })
      
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        let data = Object.assign({},this.form)
        data.roles = this.form.roles.map(e=>{
          return {
            "sa_salesforecastmodelroleid":0, 
            "roleid": e
          }
        })

        const res = await this.$api.requested({
          "id": 20220906150103,
          "version":1,
          "content": data
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.dialogFormVisible = false
          this.refrehsh()
        })
      });
    },
    async queryRoles () {
      const res = await this.$api.requested({
        "id":20221101131902,
        "content": {
          "pageNumber": 1,
          "pageSize": 1000,
          "where":{
            "condition":"",
            "usertype":"",
            "issystem":""
          }
        }
      })
      this.rolelist = res.data
    },
    addperiod () {
      this.sdList = [...this.sdList,...[this.addDate]]
      this.sdList = this.tool.deepClone(this.sdList)
    },
    deleteperiod (index) {
      console.log(index)
      this.sdList = this.sdList.filter((e,idx)=>{
        if (idx !== index)  return e
      })
    },
    onRadioChange () {
      this.sdList = []
      this.form.taskdays = []
      this.form.taskdays = []
      this.form.begdate = ''
      this.addDate = {
        periodpoint:'',
        taskday:'',
      }
    },
    onDateChange () {
      console.log(this.form.isrepeat)
      if (this.form.isrepeat === 1) {
        this.form.periodpoint = []
        this.form.periodpoint = this.sdList.map(e=>{
          return e.periodpoint
        })
        this.form.taskdays = this.sdList.map(e=>{
          return e.taskday
        })
      } else {
        this.form.taskdays = this.addDate.taskday === ''?[]:[this.addDate.taskday]
      }
      this.$refs['form'].validate(async (valid) => {})
    }
  },
  mounted () {
  }
}

</script>
<style>
.my-error-panel .el-form-item__error{
  text-indent: 10px;
}
</style>
<style scoped>
.periodTags{
  border:1px solid #dcdfe6;
  min-height:32px;
  /* margin-bottom:18px; */
  padding:0 10px;
  margin-left:10px;
  line-height:32px;
  border-radius: 4px;
  min-width: 400px;
  cursor: pointer;
}
.act{
  background: #dcdfe6;
}
.error{
  border:1px solid red !important;;
}
.submit__date_List{
  width: 400px;
  padding: 10px;
  background: #f1f2f3;

}
.list_title p{
  flex: 1;
}
</style>