<template>
  <div class="setting-content">
    <div class="naxtBox">
      <el-button v-show="showPreviousBtn" size="mini" type="primary" @click="previousTab()">上一步</el-button>
      <el-button :disabled="submit_disabled" size="mini" type="primary" @click="submitForm()">保存并关闭</el-button>
    </div>
    <div class="setting">
      <el-steps :active="active" :space="250" direction="horizontal">
        <el-step v-if="menu.includes('factor')"
                 :description="error.factor"
                 :icon="status.factor==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="因子配置"></el-step>
        <el-step v-if="menu.includes('total')"
                 :description="error.total"
                 :icon="status.total==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="总分配置"></el-step>
        <el-step v-if="menu.includes('changmo')"
                 :description="error.changmo"
                 :icon="status.changmo==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="常模设置"></el-step>
        <el-step v-if="menu.includes('warning')"
                 :description="error.warning"
                 :icon="status.warning==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="预警设置"></el-step>
        <el-step v-if="menu.includes('reliability')"
                 :description="error.reliability"
                 :icon="status.reliability==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="信效度设置"></el-step>
        <el-step v-if="menu.includes('scoringRubric')"
                 :description="error.scoringRubric"
                 :icon="status.reliability==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="评分规则"></el-step>
        <el-step v-if="menu.includes('other')"
                 :description="error.other"
                 :icon="status.other==0?'el-icon-upload':status.factor==1?'el-icon-success':status.factor==2?'el-icon-loading':'el-icon-error'"
                 title="其它设置"></el-step>
      </el-steps>
    </div>
    <!--    <el-container>-->
    <!--      <el-aside width="40%">-->

    <!--      </el-aside>-->
    <!--      <el-main>-->
    <!--        <div class="title">-->
    <!--          是否保存所有配置？-->
    <!--        </div>-->
    <!--        <el-button v-show="showPreviousBtn" type="primary" @click="previousTab()">上一步</el-button>-->
    <!--        <el-button type="primary" @click="submitForm()">保存</el-button>-->
    <!--      </el-main>-->
    <!--    </el-container>-->
  </div>
</template>

<script>
import config from './config'

export default {
  name: 'complete',
  inject: ['getToken', 'getSetting','reject'],
  props: {
    menu: [Array, Object]
  },
  components: {},
  watch: {
    status: {
      handler (status) {
        //  验证保存是否成功
        let { factor, total, warning, changmo, reliability, other } = status
        if (factor == 1 && total == 1 && warning == 1 && changmo == 1 && reliability == 1 && other == 1) {
          this.$message.success('保存成功')
          // 保存成功事件触发
          this.$emit('saveAfter')
        }
      },
      deep: true
    }
  },
  data () {
    return {
      configName: 'complete', // 配置名称
      token:null,
      showPreviousBtn: false,
      submit_disabled: false,
      status: {
        factor: 0,
        total: 0,
        warning: 0,
        changmo: 0,
        reliability: 0,
        scoringRubric: 0,
        other: 0,
      },
      error: {
        factor: '',
        total: '',
        warning: '',
        changmo: '',
        reliability: '',
        scoringRubric: '',
        other: '',
      },
      active: 0,

      rules: {},
      form: {
        rulesType: '1',
        conclusionStatus: '1'
      },
      conclusionList: {}
    }
  },
  methods: {
    loadData () {
      console.log('加载-配置')
      this.showPreviousBtn = config.permissionIndex(this.configName)
      this.conclusionList = config.localGet('conclusion-list')
    },
    // 上一步
    previousTab () {
      this.$emit('PreviousTab')
    },
    // 保存
    async submitForm () {
      this.status = {
        factor: 0,
        total: 0,
        warning: 0,
        changmo: 0,
        reliability: 0,
        other: 0,
      }
      let updateData = this.conclusionList.updateData
      let shortId = this.conclusionList.shortId
      this.submit_disabled = true
      this.token = await this.getToken()
      Object.keys(updateData).forEach((key) => {
        this.active++
        this.status[key] = 2
        if (key == 'other') {
          this.configurationSave(shortId, updateData['other'])
        } else {
          this.moduleSave(shortId, key, updateData[key])
        }
      })
      this.submit_disabled = false
    },
    // 模块保存
    moduleSave (shortId, configName, value) {
      const { host, hostSuffix, savePath } = this.getSetting()
      this.$tool.request({
        url: host + hostSuffix + savePath,
        method: 'PUT',
        data: {
          shortId: shortId,
          configName: configName,
          form: value
        },
        headers: {
          Authorization: this.token,
          way: 1
        }
      }).then(res => {
        if (res.code === 200) {
          // this.$message.success(res.msg)
          this.status[configName] = 1
        } else {
          this.status[configName] = 4
          this.error[configName] = res.msg
          this.reject(res)
        }
      }).catch(err => {
        this.status[configName] = 4
        this.error[configName] = '连接异常'
        this.reject(err)
      })
    },
    // 配置保存
    configurationSave (shortId, config) {
      const { host, hostSuffix, upRulesTypePath } = this.getSetting()
      this.$tool.request({
        url: host + hostSuffix + upRulesTypePath,
        method: 'PUT',
        data: {
          shortId: shortId,
          ...config
        },
        headers: {
          Authorization: this.token,
          way: 1
        }
      }).then(res => {
        if (res.code === 200) {
          this.status['other'] = 1
          // this.$message.success(res.msg)
        } else {
          this.status['other'] = 4
          this.error['other'] = res.msg
          this.reject(res)
        }
      }).catch(err => {
        this.status['other'] = 4
        this.error['other'] = '连接异常'
        this.reject(err)
      })
      this.active++
    }
  }
}
</script>

<style scoped>
.setting-content {
  padding: 70px 20px 0 20px;
  position: relative;
}

.setting-top {
  /* width: calc(100% - 40px) !important; */
  padding-top: 20px;
}

.naxtBox {
  position: absolute;
  right: 50px;
}

.setting-content .setting {
  margin-top: 80px;
}

::v-deep .el-icon-error {
  color: red;
}

.el-main {
  margin-top: 80px;
  font-size: 1.2em;
}

.title {
  margin-bottom: 30px;
}

.el-main .el-button {
  width: 150px;
  margin-right: 40px;
}

.el-aside {
  background-color: #FFFFFF;
}

.el-steps {
  padding: 0 0 0 170px;
}
</style>
