<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-04-06 10:25:19
-->
<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-28 09:02:23
-->
<template>
  <div class="page">
    <div class="topbox">
      <div class="levelList_i"
           :class="tabActive == item.id ? 'act' : ''"
           v-for="(item, index) in topList"
           :key="index"
           @click.prevent="handleLink(item.id)">
        {{ item.name }}
      </div>
    </div>
    <div class="main">
      <div class="contain">
        <div class="tit">{{$t('PER_DA_5')}}</div>
        <div class="xian"></div>
        <div class="pod">
          <el-checkbox-group v-model="formData.pkGradeList">
            <el-checkbox v-for="item in gradeRangList"
                         :label="item.pkId"
                         border>{{ item.gradeName }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="tit">{{$t('ENU_NOTICE_GRADE_2')}}</div>
        <div class="xian"></div>
        <div class="pod">
          <el-checkbox-group v-model="formData.pkAwardsList">
            <el-checkbox v-for="item in awardsList"
                         :label="item.pkId"
                         border>{{ item.awardsName }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="tit">{{$t('MY_WAL_32')}}</div>
        <div class="xian"></div>
        <div class="pod">
          <div class="pod_t">{{$t('MY_WAL_32')}}</div>
          <el-radio-group v-model="formData.realNameState">
            <el-radio v-for="item in yesNoList"
                      :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </div>
        <div class="tit">经销商认证</div>
        <div class="xian"></div>
        <div class="pod">
          <div class="pod_t">经销商认证</div>
          <el-radio-group v-model="formData.licenseState">
            <el-radio v-for="item in yesNoList"
                      :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </div>

      </div>
      <div class="footer">
        <el-button size="small"
                   class="thebtn2"> {{ $t('ENU_P_TYPE0') }}</el-button>
        <el-button size="small"
                   @click="submit()"
                   class="thebtn1"
                   style="background-color: #c8161d"> {{ $t('MN_F_32') }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// import * as api from '@/api/financialCase.js'
import * as api from '@/api/configManage.js'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
export default {
  name: 'jcsz',
  data() {
    return {
      tabActive: 0,
      formData: {
        pkGradeList: [],
        pkAwardsList: [],
        realNameState: 0,
        licenseState: 0,
      },
      topList: [],
      checkboxGroup: [],
      yesNoList: [],
      awardsList: [],
      gradeRangList: [],
    }
  },
  mounted() {
    this.pkId = this.$route.query.pkId
    if (this.pkId) {
      this.getDetails()
    } else {
      this.tabActive = 2
      this.topList = [
        {
          name: this.$t('MN_F_T_103'),
          id: 2,
        },
        {
          name: this.$t('MN_F_T_104'),
          id: 1,
        },
      ]
    }
    this.getConfig()
  },
  methods: {
    getDetails() {
      api
        .tradeDetails({
          pkId: this.pkId,
          businessModule: this.tabActive,
        })
        .then((res) => {
          this.formData = res.data
          this.tabActive = res.data.businessModule
          if (res.data.businessModule == 2) {
            this.topList = [
              {
                name: this.$t('MN_F_T_103'),
                id: 2,
              },
            ]
          } else {
            this.topList = [
              {
                name: this.$t('MN_F_T_104'),
                id: 1,
              },
            ]
          }
        })
    },
    getConfig() {
      api.getEYesNoList().then((res) => {
        this.yesNoList = res.data
      })
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },

    // 切换tab
    handleLink(id) {
      if (this.pkId) {

      }else{
        this.formData = {
        pkGradeList: [],
        pkAwardsList: [],
        realNameState: 0,
        licenseState: 0,
      }
      this.tabActive = id
      }
      
    },
    submit() {
      this.formData.businessModule = this.tabActive
      let url = ''
      if (this.pkId) {
        url = api.tradeUpdate
      } else {
        url = api.tradeAdd
      }
      url(this.formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success',
          })
          this.$router.go(-1)
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-select {
  width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
.el-col-20 {
  width: 20%;
}
.el-col-60 {
  width: 60%;
}
.el-col-40 {
  width: 40%;
}
.page {
  padding-top: 20px;
  background: #f8f8f8;
}
.topbox {
  align-items: center;
  padding: 0px 0 0px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 0px;
    position: relative;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    text-align: center;
    margin-right: 20px;
  }
  .act {
    color: #ffffff;
    background: #c8161d;
  }
  .act1 {
    border-bottom: 3px solid #1890ff !important;
  }
  .cha {
    font-size: 16px;
    color: #606266;
    position: absolute;
    top: 10px;
  }
  .li {
    width: 40px;
    margin: 0 auto;
    border-bottom: 3px solid transparent;
  }
}
.main {
  display: flex;
  flex-direction: column;
}
.contain {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  // margin: 0px 10px 0 10px;
  flex: 1;
  padding-top: 15px;
}
.tit {
  font-size: 14px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  border-left: 5px solid #c8161d;
  padding-left: 20px;
}
.xian {
  margin-top: 10px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.pod {
  padding: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.pod_t {
  margin-right: 20px;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.thebtn1 {
  background: #3181e5;
  color: #ffffff;
  padding: 9px 45px;
  margin-left: 20px;
  border-radius: 5px;
  height: 38px;
}
.thebtn2 {
  height: 38px;
  background: #cccccc;
  color: #ffffff;
  padding: 9px 45px;
  border-radius: 5px;
}
.neibu {
  margin-right: 10px;
  color: #666666;
  font-style: normal;
}
.elTag {
  margin-right: 10px;
}
.check {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  // justify-content: center;
  .check_i {
    width: 50%;
    text-align: left;
    margin-right: 0 !important;
  }
}
.jy {
  font-size: 10px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
