<template>
    <div class="trainplan_bm_order_confirm_pc_1">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-xm-12 col-xs-12">
                    <div class="operation-step">
                        <!-- <span style="background:url(images/buzhou-01.png) center no-repeat"></span> -->
                        <img src="../../theme-chalk/src/images/buzhou-01.png" style="width:82%;" alt="">
                        <ul>
                            <li>1、核对订单信息</li>
                            <li>2、提交并支付各订单</li>
                            <li>3、报名完成</li>
                        </ul>
                    </div>
                    <div class="order_confirm_title">
                        <span class="sp1">{{title}}</span>
                        <span class="sp2" v-if="proStudylength">学时要求：{{proStudylength}}学时</span>
                        <!--<span class="sp3">注：安徽省三项岗位人员培训报名唯一官方入口，其他平台报名均不认学时！</span> -->
                    </div>
                    <div class="order_index-title">
                        <div class="index-title">
                            <span class="sp1">所选课程</span>
                            <span class="sp3">已选课程<i>{{num}}</i>门，共计学时：<i>{{totalLen}}</i>学时</span>
                        </div>
                    </div>
                    <div class="common-table">
                        <table>
                            <thead>
                            <tr>
                                <td>所属知识点</td>
                                <td>课程名称</td>
                                <td>学时</td>
                                <td>课程来源</td>
                            </tr>
                            </thead>
                            <tr v-for="(list,i) in menu" :key="i">
                                <td style="text-align:center;" class="textleft blacktext">{{list.tkName }}</td>

                                <td style="text-align:center;" class="textleft" :id="'a'+list.tkId">
                                    {{list.name.toString()}}
                                </td>
                                <td :id="'b'+list.tkId">{{list.len}}</td>
                                <td style="text-align:center;" class="textleft" :id="'c'+list.tkId">{{list.source |
                                    $source }}
                                </td>

                            </tr>

                        </table>
                        <!--v-if="accorType===2"-->
                        <div v-if="accorType===2" class="order_confirm_download">
              <span class="sp1">下载批量申报文件模板：
                <a href="/registration_template/registration_template.xls" download="registration_template.xls">批量导入学员模板.xsl</a>
                <span style="color:#ff9600;padding-left:40px;">导入的学员可以使用身份证或手机号+密码登录（密码默认是身份证后六位）</span>
              </span>

                            <!--<span class="sp2">上传数据excel文件<input type="button" value="选择文件" class="choose-btn"><a href="">金属非金属矿山主要负责人培训报名人员名单.xls</a><input type="button" value="导入名单" class="import-btn"></span>-->
                            <div style="margin-top:30px;">
                                <div style="float:left;">上传数据excel文件</div>
                                <div style="float:left;">
                                    <upload
                                            class="upload-demo"
                                            :action="uploadurl"
                                            :name="name"
                                            ref="upload"
                                            :show-file-list="false"
                                            :on-change="handleChange"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload"
                                    >
                                        <!--<el-button size="small" type="primary">点击上传</el-button> -->
                                        <input type="button" value="选择文件" class="choose-btn">
                                        <a href="javascript:void(0)">{{fileName}}</a>
                                        <!--<input type="button" value="导入名单" class="import-btn" @click="submitUpload">
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                                    </upload>
                                </div>
                            </div>
                        </div>
                        <div v-if="accorType===2" class="order_confirm_tiptitle" style="margin-top:70px;">共导入{{lists |
                            $length}} 名学员，成功 {{lists | $success}} 名，失败<i>{{lists | $error}}</i>名
                        </div>
                        <div class="common-table">
                            <table class="common-table-gray" v-if="accorType===2">
                                <thead>
                                <tr>
                                    <td>学员姓名</td>
                                    <td>身份证号码</td>
                                    <td>手机号码</td>
                                    <td>导入结果</td>
                                </tr>
                                </thead>

                                <tr v-for="(list,i) in lists" :key="i">
                                    <td>{{list.custName}}</td>
                                    <td>{{list.idcarNo}}</td>
                                    <td>{{list.phone}}</td>
                                    <td v-if="list.flag==1" class="bluetext">成功</td>
                                    <td v-else class="redtext">失败({{list.cause}})</td>
                                </tr>

                            </table>
                            <span v-if="accorType !=3" class="orangebtn"><a href="javascript:void(0)" @click="go">确认并提交订单</a></span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import $ from 'fy-kit';
  import login from '../../login';
  import msg from '../../message';
  import upload from '../../upload';

  export default {
    name: 'ElConfirm',
    mixins: [formMixin],
    props: {},
    components: {
      login,
      msg,
      upload
    },
    computed: {
      defaultAttrs() {
        return {
          placeholder: this.t('ele-form.input') + this.desc._label
        };
      }
    },
    created() {
      this.accType();

    },
    mounted() {
      this.uploadurl = lenye_base.base_data.getapiUrl() + '/file-service/upload/file';

      this.title = JSON.parse(localStorage.menuList)[0].proName;
      this.init();
      this.totalStudyLen();
    },
    filters: {
      $toData(data) {
        return $.date.moment(data).format('YYYY年MM月DD日');
      },
      $success(data) {
        return $.array.getLenById(data, 'flag', '1');
      },
      $error(data) {
        return $.array.getLenById(data, 'flag', '0');
      },
      $length(data) {
        return data.length;
      },
      $source(val) {
        if (val == 'no') {
          return '';
        } else {
          return val;
        }
      }

    },
    data() {
      return {
        menu: [],
        num: 0,
        totalLen: 0,
        title: '',
        proStudylength: 0,
        fileName: '',
        uploadurl: '',
        name: 'imgFile',
        lists: [],
        accorType: 1
      };
    },
    methods: {
      proList(unitId) {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/schoolclass-service/api2/proUnitTeachcontent/queryList.do',
            lenye_base.base_data.getformatting({
              tcId: $.util.storage('tcId').get().getValue()
            })
          )
          .then(res => {
            if (res.success === '1') {
              if (res.data.length > 0) {
                this.getClass(res.data[0].jtUpId);
              } else {
                this.addUser(unitId);
              }
            } else {
              msg.error(res.message);
            }
          });
      },
      getClass(jtUpId) {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/schoolclass-service/api2/clzClazz/saveJtClazz.do',
            lenye_base.base_data.getformatting({
              jtUpId
            })
          )
          .then(res => {
            if (res.success === '1') {
              this.objId = res.data;
              this.czId=res.data;
              localStorage.czId=res.data;
            } else {
              msg.error(res.message);
            }
          });
      },
      addUser(unitId) {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/schoolclass-service/api2/proUnitTeachcontent/insert.do',
            lenye_base.base_data.getformatting({
              tcId: $.util.storage('tcId').get().getValue(),
              unitId
            })
          )
          .then(res => {
            if (res.success === '1') {
              this.proList();
            } else {
              msg.error(res.message);
            }
          });
      },
      accType() {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/base-service/api2/custUserIdentity/queryUserIdentities.do',
            lenye_base.base_data.getformatting({})
          )
          .then(res => {
            if (res.success === '1') {
              // this.datas = res.data;
              if (res.data && res.data[0] && res.data[0].idtCode) {
                if (res.data[0].idtCode == 'company') {
                  this.accorType = 2;
                  this.proList(res.data[0].ciId);
                } else {
                  this.accorType = 3;
                }
              } else {
                this.accorType = 1;
              }
            } else {
              msg.error(res.message);
            }
          });
      },
      handleAvatarSuccess(res) {
        if (res.success == '1') {
          let that=this;
          $.util
            .ajax(
              lenye_base.base_data.getapiUrl() +
              '/schoolclass-service/api2/clzStudentClazz/importClassStudent.do',
              lenye_base.base_data.getformatting({
                czId: that.czId,
                fileId: res.data.fileId
              })
            )
            .then(res => {
              if (res.success == '1') {
                this.lists = res.data;
              } else {
                msg.error(res.message);
              }
            });
        } else {
          msg.error(res.message);
        }

      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      beforeAvatarUpload(file) {
        var arr = file.name.split('.');
        var hz = arr[arr.length - 1];
        if (hz == 'xls' || hz == 'xlsx') {
          console.log('格式正确！');
        } else {
          msg.error('上传文件只能是xls格式或xlsx格式!');
          return false;
        }
      },
      handleChange(file, fileList) {
        this.fileName = file.name;
      },
      go() {
        if (!$.util.storage('userData').get().getValue()) {
          msg.warning('请登录后继续操作！');
          return false;
        }
        var Params = JSON.parse(localStorage.Params);
        Params['custId'] = JSON.parse(localStorage.userData).custId;
        if (this.accorType === 2) {
          if (!this.lists.length) {
            msg.warning('请导入学员信息继续操作！');
            return false;
          } else if ($.array.getLenById(this.lists, 'flag', '0')) {
            msg.warning('导入学员信息有误，请检查后继续操作！');
            return false;
          }
          Params['objId'] = this.objId;
        }

        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/orderform-service/api2/ordShoppingCart/signup.do',
            lenye_base.base_data.getformatting(Params)
          )
          .then(res => {
            if (res.success == '1') {
               var status = res.data.status;
                if(status=='1'){  //待支付
                  msg.success('报名成功！');
                  setTimeout(()=>{
                     window.location.href = '/projectorderpay';
                  },1000);
                }else if(status=='2'){
                  msg.warning(res.data.msg);
                  setTimeout(()=>{
                    window.location.href="/personcenter";//待付订单列表
                  },1000);
                }else if(status=='3'){
                  msg.success("报名成功！");
                }else{
                  msg.error('报名失败！');
                }
            } else {
                msg.error(res.message);

            }
          });
      },
      totalStudyLen() {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/schoolclass-service/common/proTeachcontent/queryById.do',
            lenye_base.base_data.getformatting({
              tcId: localStorage.tcId
            })
          )
          .then(res => {
            if (res.success == '1') {
              this.proStudylength = Number(res.data.proStudylength);
            } else {
              msg.error(res.message);
            }
          });
      },
      init() {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/schoolclass-service/common/proTeachcontentKnowledge/queryList.do',
            lenye_base.base_data.getformatting({
              tcId: localStorage.tcId
            })
          )
          .then(res => {
            if (res.success == '1') {
              //res.data[0].tkId = 'known1001';
              //res.data[1].tkId = 'known1002';

              var kCourseList = JSON.parse(localStorage.kCourseList);
              var kCourseLen = JSON.parse(localStorage.kCourseLen);
              res.data.forEach((list, i) => {
                var name = [];
                var len = [];
                var source = [];
                if (kCourseList[list.tkId]) {
                  kCourseList[list.tkId].forEach((item, j) => {
                    name.push(item.split('_')[1]);
                    source.push(item.split('_')[2]);
                  });
                }
                if (kCourseLen[list.tkId]) {
                  kCourseLen[list.tkId].forEach((item, j) => {
                    len.push(item.split('_')[1]);
                  });
                }

                list['name'] = name;
                list['len'] = $.array.total(len);
                list['source'] = $.array.uniq(source).toString();

              });

              var num = 0;
              var totalLen = 0;
              res.data.forEach((list, i) => {
                num = $.string.jia(num, list.name.length);
                totalLen = $.string.jia(totalLen, list.len);
              });
              this.num = num;
              this.totalLen = totalLen;
              this.menu = res.data;
            } else {
              msg.error(res.message);
            }
          });
      }
    }
  };
</script>
