 <template>
  <div>
    <div>
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="top" label-width="80px">
        <el-form-item label="手机号码" prop="phone">
          <el-input
            type="number"
            v-model="temp.phone"
            :disabled="dialogStatus==='detail' || temp.is_created===1"
            clearable
          />
        </el-form-item>
        <el-form-item label="客户姓名" prop="name">
          <el-input
            v-model="temp.name"
            maxlength="20"
            :disabled="dialogStatus==='detail' || temp.is_created===1"
            clearable
          />
        </el-form-item>
        <el-form-item label="值班日期" prop="duty_date">
          <el-input v-model="temp.duty_date" disabled clearable />
        </el-form-item>
        <el-form-item label="外呼日期" prop="call_date">
          <el-input v-model="temp.call_date" disabled clearable />
        </el-form-item>
        <el-form-item label="话术流程" prop="project_name">
          <el-input v-model="temp.project_name" disabled clearable />
        </el-form-item>
        <el-form-item label="外呼时间" prop="call_time">
          <el-time-picker
            :editable="false"
            :disabled="dialogStatus==='detail' || temp.is_created===1"
            v-model="temp.call_time"
            value-format="HH:mm:ss"
            :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
            placeholder="请选择呼叫时间点"
          ></el-time-picker>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer text-rt">
      <el-button @click="saveData(0)">取消</el-button>
      <el-button v-if="dialogStatus==='update'" type="primary" @click="saveData(1)">确定</el-button>
    </div>
  </div>
</template>

<script>
import { editStrategyTask } from '@/api/article'

export default {
  name: 'AddOrEdit',
  props: ['dialogStatus', 'temp'],
  data() {
    const validatePhone = (rule, value, callback) => {
      if (/^[1][0-9]{10}$/.test(String(value || ''))) {
        callback()
      } else {
        callback(new Error('请输入11位手机号'))
      }
    }
    return {
      typeOptions: [
        { value: 1, key: 'Web端' },
        { value: 2, key: '后台代码' }
      ],
      rules: {
        phone: [
          {
            required: true,
            message: '手机号码必填且不能超过11位字符',
            validator: validatePhone,
            trigger: 'blur'
          }
        ],
        call_time: [
          {
            required: true,
            message: '呼叫设置时间必选',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {},
  methods: {
    saveData(status) {
      // 0 cancel/close 1 save  dialogStatus/create/update
      if (this.dialogStatus === 'update') {
        if (status) {
          this.$refs['dataForm'].validate(valid => {
            if (valid) {
              const { name, phone, call_time } = this.temp
              const tempData = {
                id: this.temp.id,
                user_sn: this.$publicTools.decrypt(
                  localStorage.getItem('user_sn')
                ),
                name: name,
                phone: phone,
                call_time: call_time
              }
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              })
              editStrategyTask(tempData)
                .then(res => {
                  loading.close()
                  this.$emit('save', 1)
                  this.$message({
                    message:
                      Object.prototype.toString.call(res) ===
                        '[object Object]' && res.info
                        ? res.info
                        : '更新成功',
                    type: 'success'
                  })
                })
                .catch(() => {
                  loading.close()
                })
            }
          })
        } else {
          this.$emit('save')
        }
      } else {
        this.$emit('save')
      }
    }
  }
}
</script>
