 <template>
  <div>
    <div>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="top"
        label-width="90px"
        id="strategy-add-form"
      >
        <el-form-item label="策略名称" prop="strategy_name">
          <el-input v-model="temp.strategy_name" clearable placeholder="请输入策略名称" />
        </el-form-item>
        <el-form-item label="客户数据" prop="upload">
          <div class="upload-box">
            <!-- <el-input
              placeholder="请按照模板格式填写数据(文件大小不可超过8MB)"
              readonly
              clearable
              v-model="temp.uploadname"
            >
              <i slot="suffix" class="el-input__icon el-icon-upload"></i>
            </el-input>-->
            <el-input placeholder="请按照模板格式填写数据(文件大小不可超过8MB)" readonly v-model="temp.uploadname" />
            <i @click="delFile" class="el-icon-circle-close"></i>
            <i @click="importData" class="el-icon-upload"></i>
          </div>
          <el-button size="small" @click="downloadTemplate" class="download-btn">下载模板</el-button>
        </el-form-item>
        <el-form-item label="子账号" prop="user_sn">
          <el-select
            clearable
            v-model="temp.user_sn"
            class="filter-item"
            disabled
            placeholder="请选择子账号"
          >
            <el-option
              v-for="item1 in typeOptions"
              :key="item1.user_sn"
              :label="item1.user_name"
              :value="item1.user_sn"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="主叫号码" prop="call_number">
          <el-select clearable v-model="temp.call_number" class="filter-item" placeholder="请选择主叫号码">
            <el-option
              v-for="(item2,key2) in CallNumberList"
              :key="key2"
              :label="item2"
              :value="item2"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="外呼日期" prop="day_type">
          <el-radio-group v-model="temp.day_type" size="medium">
            <el-radio-button label="0">每天</el-radio-button>
            <el-radio-button label="1">日期前一天和当天</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="外呼频率" prop="frequency_type">
          <el-radio-group v-model="temp.frequency_type" size="medium" disabled>
            <el-radio-button label="2">一天两次</el-radio-button>
            <el-radio-button label="1">一天一次</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="呼叫设置" prop="setdate1">
          <el-time-picker
            v-model="temp.setdate1"
            :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
            placeholder="请选择呼叫时间点1"
          ></el-time-picker>
        </el-form-item>
        <el-form-item v-if="showDate" label="请选择呼叫时间点2" prop="setdate2" class="hide-label">
          <el-time-picker
            v-model="temp.setdate2"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="请选择呼叫时间点2"
          ></el-time-picker>
        </el-form-item>

        <el-form-item label="话术流程" prop="project_sn" class="hide-label">
          <el-select v-model="temp.project_sn" multiple :multiple-limit="2" placeholder="请选择话术流程">
            <el-option
              v-for="item3 in processOpts"
              :key="item3.sn"
              :label="item3.name"
              :value="item3.sn"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="disabled" class="fl-label">
          <el-switch v-model="temp.disabled"></el-switch>
          <!-- disabled 0开启 1是不开启 -->
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer text-rt">
      <el-button @click="saveData(0)">取消</el-button>
      <el-button type="primary" @click="saveData(1)">确定</el-button>
    </div>
    <el-dialog
      title="导入数据"
      :visible.sync="importVisible"
      :append-to-body="true"
      width="30%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <ImprtData
        v-if="importVisible"
        :temp="temp"
        :dialogStatus="dialogStatus"
        @addSave="importCallback"
      ></ImprtData>
    </el-dialog>
    <el-dialog
      title="导入数据结果"
      :visible.sync="dialogResultVisible"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      width="400px"
    >
      <div class="result-box">
        <div>
          <i
            v-if="failTotal>0"
            class="el-icon-warning"
            :class="[successTotal===0&&failTotal>0?'fail-all-bgc':'fail-bgc']"
          ></i>
          <i v-else class="el-icon-success"></i>
        </div>
        <div>成功导入{{successTotal}}个号码，{{failTotal}}个号码导入失败</div>
        <div v-if="failTotal>0">
          <a class="down-txt" @click="downloadFail">点击下载失败数据文件</a>
        </div>
      </div>
      <div slot="footer" class="dialog-footer text-center">
        <el-button type="primary" @click="handleResultClose">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addStrategySet,
  getProjectsList,
  getCallNumberList,
  downloadModel,
  getUsersList,
  downloadFailExcel
} from '@/api/article'
import ImprtData from './import-data'

export default {
  name: 'AddOrEdit',
  components: { ImprtData },
  props: ['dialogStatus', 'temp'],
  data() {
    return {
      failDataFile: '',
      successTotal: 0,
      failTotal: 0,
      dialogResultVisible: false,
      showDate: false,
      importVisible: false,
      onlyOneProcess: false,
      processOpts: [],
      CallNumberList: [],
      typeOptions: [],
      rules: {
        strategy_name: [
          {
            required: true,
            message: '策略名称必填且不能超过30个字符',
            trigger: 'blur',
            max: 30
          }
        ],
        files: [
          {
            required: true,
            message: '源码类型必填',
            trigger: 'blur'
          }
        ],
        user_sn: [
          {
            required: true,
            message: '子账号必选',
            trigger: 'blur'
          }
        ],
        call_number: [
          {
            required: true,
            message: '主叫号码必选',
            trigger: 'blur'
          }
        ],
        day_type: [
          {
            required: true,
            message: '外呼日期必选',
            trigger: 'blur'
          }
        ],
        frequency_type: [
          {
            required: true,
            message: '外呼频率必选',
            trigger: 'blur'
          }
        ],
        setdate1: [
          {
            required: true,
            message: '呼叫设置-外呼时间点1必选',
            trigger: 'blur'
          }
        ],
        setdate2: [
          {
            required: true,
            message: '呼叫设置-外呼时间点2必选',
            trigger: 'blur'
          }
        ],
        project_sn: [
          {
            required: true,
            message: '呼叫设置-话术流程必选',
            trigger: 'blur'
          }
        ],
        disabled: [
          {
            required: true,
            message: '状态必选',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    'temp.day_type': function(nv) {
      this.change_day_type(nv)
    }
  },
  created() {
    this.change_day_type(this.temp.day_type)
    getProjectsList({
      user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn'))
    })
      .then(res => {
        this.processOpts = Array.isArray(res.info) ? res.info : []
      })
      .catch(() => {
        this.processOpts = []
      })
    getCallNumberList({
      user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn'))
    })
      .then(res => {
        this.CallNumberList = Array.isArray(res.info) ? res.info : []
      })
      .catch(() => {
        this.CallNumberList = []
      })
    getUsersList({
      user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn'))
    })
      .then(res => {
        this.typeOptions =
          Object.prototype.toString.call(res.info) === '[object Object]'
            ? [res.info]
            : []
        if (this.typeOptions.length) {
          this.temp.user_sn =
            Object.prototype.toString.call(this.typeOptions[0]) ===
            '[object Object]'
              ? this.typeOptions[0].user_sn
              : ''
        }
      })
      .catch(() => {
        this.typeOptions = []
      })
  },
  methods: {
    downloadFail() {
      downloadFailExcel({
        user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn')),
        filename: this.failDataFile
      })
    },
    handleResultClose() {
      this.dialogResultVisible = false
      this.$emit('save')
    },
    change_day_type(nv) {
      this.temp.project_sn = null
      if (nv === '0') {
        this.temp.frequency_type = '2'
        this.showDate = true
        this.onlyOneProcess = true
      } else if (nv === '1') {
        this.temp.frequency_type = '1'
        this.showDate = false
        this.onlyOneProcess = false
      }
    },
    delFile() {
      this.temp.upload = {}
      this.temp.uploadname = ''
    },
    importData(row) {
      this.temp.isAddGo = true
      this.importVisible = true
    },
    importCallback(file) {
      this.importVisible = false
      if (file && file.name) {
        this.temp.upload = file || {}
        this.temp.uploadname = this.temp.upload.name
      }
    },
    downloadTemplate() {
      downloadModel({
        user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn'))
      })
    },
    saveData(status) {
      this.temp.disabled =
        this.temp.disabled === true || this.temp.disabled === false
          ? this.temp.disabled
          : true
      let disabled = this.temp.disabled ? 0 : 1
      // 0 cancel/close 1 save  dialogStatus/create/update
      if (status) {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            if (this.temp.day_type === '1') {
              if (
                Array.isArray(this.temp.project_sn) &&
                this.temp.project_sn.length !== 2
              ) {
                this.$message({
                  message: '话术流程必选2个',
                  type: 'warning'
                })
                return false
              }
            }
            let {
              strategy_name,
              call_number,
              day_type,
              frequency_type
            } = this.temp

            let form = new FormData()
            form.append(
              'user_sn',
              this.$publicTools.decrypt(localStorage.getItem('user_sn'))
            )
            form.append('strategy_name', strategy_name)
            form.append('call_number', call_number)
            form.append('day_type', day_type)
            form.append('frequency_type', frequency_type)
            form.append(
              'call_time_set',
              this.$moment(this.temp.setdate1).format('HH:mm:ss') +
                (this.temp.setdate2
                  ? '#' + this.$moment(this.temp.setdate2).format('HH:mm:ss')
                  : '')
            )
            form.append('project_sn', this.temp.project_sn.join('#'))
            form.append('disabled', disabled)
            form.append('upload', this.temp.upload)

            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            if (this.dialogStatus === 'create') {
              addStrategySet(form)
                .then(res => {
                  debugger
                  loading.close()
                  this.$message({
                    message: '创建成功',
                    type: 'success'
                  })
                  if (
                    Object.prototype.toString.call(res.info) ===
                    '[object Object]'
                  ) {
                    this.failDataFile = res.info.failDataFile || ''
                    this.failTotal = res.info.failTotal || 0
                    this.successTotal = res.info.successTotal || 0
                    if (this.successTotal || this.failTotal) {
                      this.dialogResultVisible = true
                    } else {
                      this.$emit('save')
                    }
                  } else {
                    this.$emit('save')
                  }
                })
                .catch(() => {
                  loading.close()
                })
            }
          }
        })
      } else {
        this.$emit('save')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-upload {
  color: #c3c6ca;
  font-size: 24px;
  vertical-align: middle;
  position: absolute;
  top: 0;
  right: 100px;
  line-height: 36px;
}
.el-date-editor.el-input {
  width: 100%;
}
.upload-box {
  margin-right: 69px;
  input {
    height: 36px;
    line-height: 36px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .el-input:hover {
    & + .el-icon-circle-close {
      display: inline-block;
    }
  }
  .el-icon-circle-close {
    color: #c3c6ca;
    font-size: 16px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 75px;
    line-height: 36px;
    z-index: 1;
    display: none;
    &:hover {
      display: inline-block;
    }
  }
}
.download-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 36px;
  line-height: 36px;
  width: 70px;
  text-align: center;
  padding: 0;
  text-decoration: underline;
}
// 导入数据结果
.result-box {
  line-height: 30px;
  text-align: center;
  .down-txt {
    color: rgb(77, 193, 244);
  }
  .el-icon-success {
    color: rgb(3, 182, 21);
    font-size: 33px;
  }
  .el-icon-warning {
    font-size: 33px;
  }
  .fail-all-bgc {
    color: #d9001b;
  }
  .fail-bgc {
    color: #f59a23;
  }
}
.down-btn,
.upload-btn {
  color: #3691ff;
}

label {
  font-weight: normal;
}
.import-box::before {
  content: '*';
  color: #ff4949;
  margin-right: 4px;
  display: inline-block;
}
</style>
<style lang="scss">
#strategy-add-form {
  .hide-label {
    label {
      display: none;
      &::before {
        display: none;
      }
    }
  }
  .fl-label {
    label {
      float: left;
      margin-right: 10px;
    }
  }
}
</style>
