 <template>
  <div>
    <div class="drawer_body_box">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px">
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="temp.phone"
            :disabled="dialogStatus==='detail' || temp.phoneData"
            clearable
          />
        </el-form-item>
        <el-form-item label="客户姓名" prop="user_name">
          <el-input
            v-model="temp.user_name"
            maxlength="20"
            :disabled="dialogStatus==='detail' || temp.phoneData"
            clearable
          />
        </el-form-item>
        <el-form-item label="值班日期" prop="date1">
          <el-input v-model="temp.date1" disabled clearable />
        </el-form-item>
        <el-form-item label="外呼时间" prop="date2">
          <el-input v-model="temp.date2" disabled clearable />
        </el-form-item>
        <el-form-item label="话术流程" prop="process">
          <el-input v-model="temp.process" disabled clearable />
        </el-form-item>
        <el-form-item label="呼叫设置" prop="sets">
          <el-time-picker
            :disabled="dialogStatus==='detail' || temp.phoneData"
            v-model="temp.sets"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="请选择呼叫时间点"
          ></el-time-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer__footer text-rt">
      <el-button type="primary" @click="saveData(1)">确定</el-button>
      <el-button @click="saveData(0)">取消</el-button>
    </div>
  </div>
</template>

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

export default {
  name: 'AddOrEdit',
  props: ['dialogStatus', 'temp'],
  data() {
    return {
      sourceOptions: [
        { value: 'Git', key: 'Git' },
        { value: 'SVN', key: 'SVN' }
      ],
      typeOptions: [
        { value: 1, key: 'Web端' },
        { value: 2, key: '后台代码' }
      ],
      rules: {
        phone: [
          {
            required: true,
            message: '手机号码必填且不能超过11位字符',
            trigger: 'blur',
            max: 11
          }
        ],
        sets: [
          {
            required: true,
            message: '呼叫设置时间必选',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    if (this.dialogStatus === 'update') { // test
      this.temp.phoneData = true
    }
  },
  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 tempData = this.$publicTools.deepClone(this.temp)
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              })
              editCodes(tempData)
                .then(res => {
                  loading.close()
                  this.$emit('save', status)
                  this.$message({
                    message:
                      Object.prototype.toString.call(res) ===
                        '[object Object]' && res.info
                        ? res.info
                        : 'update Successfully',
                    type: 'success'
                  })
                })
                .catch(() => {
                  loading.close()
                })
            }
          })
        } else {
          this.$emit('save')
        }
      } else {
        this.$emit('save')
      }
    }
  }
}
</script>
