<template>
  <div>

    <div>
      <div ref="lxHeader">
        <lx-header icon="md-apps" :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content">

            <div class="searchwrap" style="display: flex;align-items: center;">
              <div>
                <div>
                  <el-input v-model="select.keyword" placeholder="请输入关键词"></el-input>
                </div>
                <xy-selectors style="width:auto" @reset="resetSelect" @search="select.page=1,getList()">
                  <template v-slot:selected>
                    <div class="selected-wrap">
                      <div>
                        <el-date-picker style="width:100%" v-model="select.year"
                          type="year" placeholder="查询年份" value-format="yyyy" format="yyyy">
                        </el-date-picker>
                      </div>
                      <div>
                        <el-input v-model="select.course_name" placeholder="请输入课程名称"></el-input>
                      </div>
                      <div>
                        <el-date-picker style="width:100%" @change="changeDate" v-model="select.courses_end_date"
                          type="date" placeholder="课程结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                        </el-date-picker>
                      </div>
                      <div>
                        <el-select v-model="select.status" placeholder="请选择审核状态" clearable>
                          <el-option v-for="item in apply_status_list" :key="item.id" :label="item.value"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <el-select v-model="select.course_type" placeholder="请选择课程体系" clearable>
                          <el-option v-for="item in courseTypeList" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <el-input v-model="select.name" placeholder="请输入姓名"></el-input>
                      </div>
                      <div style="width:250px">
                        <el-date-picker v-model="birthdayDates" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          style="width:100%" @change="changeBirthdayDates" type="daterange" range-separator="至"
                          start-placeholder="出生日期" end-placeholder="出生日期">
                        </el-date-picker>
                      </div>
                      <div>
                        <el-input v-model="select.mobile" placeholder="请输入手机号"></el-input>
                      </div>
                      <div>
                        <el-input v-model="select.school" placeholder="请输入最高毕业院校"></el-input>
                      </div>
                      <div>
                        <el-select style="width:100%" v-model="educationType"
                          @change="(e)=>{changeSelectType(e,'education')}" multiple collapse-tags placeholder="请选择学历"
                          clearable>
                          <el-option v-for="item in formSelect.education" :key="item.id" :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div style="width:200px">
                        <el-select style="width:100%" v-model="typeSelect" @change="(e)=>{changeSelectType(e,'type')}"
                          multiple collapse-tags placeholder="请选择个人荣誉" clearable>
                          <el-option v-for="item in formSelect.type" :key="item.id" :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <el-select v-model="select.is_vip" placeholder="请选择学员身份" clearable>
                          <el-option v-for="item in is_vip_list" :key="item.id" :label="item.value" :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <el-select v-model="select.is_schoolmate" placeholder="请选择是否校友" clearable>
                          <el-option v-for="item in is_schoolmate_list" :key="item.id" :label="item.value"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>


                      <div>
                        <el-input v-model="select.company_name" placeholder="请输入公司名称"></el-input>
                      </div>
                      <div>
                        <el-input v-model="select.company_position" placeholder="请输入职务"></el-input>
                      </div>
                      <div>
                        <el-select v-model="select.company_has_share" placeholder="是否有股份" clearable>
                          <el-option v-for="item in shareList" :key="item.value" :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <el-select v-model="select.company_need_fund" placeholder="是否需要融资" clearable>
                          <el-option v-for="item in yuanheList" :key="item.value" :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div style="width:250px">
                        <el-date-picker v-model="companyDates" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          style="width:100%" @change="changeCompanyDates" type="daterange" range-separator="至"
                          start-placeholder="公司成立日期" end-placeholder="公司成立日期">
                        </el-date-picker>
                      </div>

                      <div style="width:200px">
                        <el-select style="width:100%" v-model="companyArea" multiple collapse-tags
                          @change="(e)=>{changeSelectType(e,'company_area')}" placeholder="请选择所属区域" clearable>
                          <el-option v-for="item in formSelect.company_area" :key="item.id" :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div style="width:250px">
                        <el-select style="width:100%" v-model="companyType"
                          @change="(e)=>{changeSelectType(e,'company_type')}" multiple collapse-tags
                          placeholder="请选择企业资质" clearable>
                          <el-option v-for="item in formSelect.company_type" :key="item.id" :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>

                      <div style="width:250px">
                        <el-select style="width:100%" v-model="companyIndustry" multiple collapse-tags
                          @change="(e)=>{changeSelectType(e,'company_industry')}" placeholder="请选择所属领域" clearable>
                          <el-option v-for="item in formSelect.company_industry" :key="item.id" :label="item.value"
                            :value="item.value">
                          </el-option>
                          <!-- <el-option v-for="item in formSelect.company_industry_detail" :key="item.id" :label="item.value"
                            :value="item.value">
                          </el-option> -->
                        </el-select>
                      </div>
                      <div>
                        <el-select v-model="select.has_openid" placeholder="是否绑定小程序" clearable>
                          <el-option v-for="item in false_or_true" :key="item.id" :label="item.value" :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </template>
                </xy-selectors>






                <div>
                  <el-button type="primary" size="small" @click="select.page=1,getList()">查询</el-button>
                  <el-button type="primary" size="small" @click="resetSelect">重置</el-button>
                  <el-button type="primary" size="small" @click="exportExcel">导出</el-button>
                </div>
              </div>

            </div>
          </div>

        </lx-header>
      </div>
    </div>

    <div>
      <div class="txl">统计：{{searyear?searyear+'年':'本年度'}}学员共计{{year_total}}人；学员总计{{alltotal}}人。</div>
      <xy-table :list="list" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange" :total="total"
        :table-item="table_item" :showIndex="false">
        <template v-slot:index>
          <el-table-column align='center' fixed="left" label="" width="50" header-align="center">
            <template slot-scope="scope">
              {{getIndex(scope.$index)}}
            </template>
          </el-table-column>
        </template>
        <template v-slot:course_list>
          <el-table-column align='left' label="课程" width="320" header-align="center">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.course_signs">
                <div v-if="item.course"
                  style="width:100%;display: flex;justify-content: space-between;align-items: center;margin-bottom:5px">
                  <div>
                    {{item.course.year?item.course.year:''}}{{item.course.type_detail.name+' | '}}{{item.course.name}}
                  </div>
                  <template v-for="state in apply_status_list">
                    <el-tag style="margin-left:20px" :type="state.type"
                      v-if="item.status===state.id">{{state.value}}</el-tag>
                  </template>
                </div>

              </div>
            </template>
          </el-table-column>
        </template>
        <template v-slot:headimgurl>
          <el-table-column align='center' label="头像" width="100" header-align="center">
            <template slot-scope="scope">
              <el-image
                  v-if="scope.row.headimgurl"
                  style="width: 50px; height: 50px;border-radius: 100%;"
                  :src="scope.row.headimgurl"
                  :preview-src-list="[scope.row.headimgurl]">
                </el-image>
            </template>
          </el-table-column>
        </template>
        <template v-slot:mobile>
          <el-table-column align='center' label="联系方式" width="120" header-align="center">
            <template slot-scope="scope">
              {{base.maskPhoneNumber(scope.row.mobile)}}
            </template>
          </el-table-column>
        </template>
        <template v-slot:is_schoolmate>
          <el-table-column align='center' label="是否校友库学员" width="120" header-align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_schoolmate===1" type="">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
        </template>
        <template v-slot:is_vip>
          <el-table-column align='center' label="学员身份" width="120" header-align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.is_vip===1">付费</div>
              <div v-else>公益</div>
            </template>
          </el-table-column>
        </template>
        <template v-slot:is_wx>
          <el-table-column align='center' label="是否绑定小程序" width="120" header-align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.openid">
                是
              </el-tag>
              <el-tag v-else type="info">
                否
              </el-tag>

            </template>
          </el-table-column>
        </template>

        <template v-slot:btns>
          <el-table-column align='center' label="操作" fixed="right" width="80" header-align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="showDetail('show',scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </template>
      </xy-table>
    </div>

    <student-detail ref="studentDetail"></student-detail>
  </div>
</template>

<script>
  import studentDetail from './components/detail.vue';
  import myMixins from "@/mixin/selectMixin.js";
  import formMixin from "@/mixin/formMixin.js";
  import {
    download
  } from "@/utils/downloadRequest";
  import {
    indexStudy
  } from '@/api/student/index.js'
  import {
    index as indexTypes
  } from "@/api/course/courseType.js"
  export default {
    mixins: [myMixins, formMixin],
    components: {
      studentDetail
    },
    data() {
      return {
        path: '',
        // 多选 获取
        companyDates: [],
        birthdayDates: [],
        companyType: [],
        typeSelect: [],
        educationType: [],
        companyIndustry: [],
        companyArea: [],
        select: {
          keyword: '',
          year:'',
          name: '',
          mobile: '',
          course_name: '',
          company_name: '',
          school: '',
          start_birthday: '',
          end_birthday: '',
          start_company_date: '',
          end_company_date: '',
          company_has_share: '',
          company_need_fund: '',
          company_position: '',
          company_area: '',
          company_type: '',
          company_industry: '',
          is_vip: '',
          is_schoolmate: '',
          courses_end_date: '',
          education: '',
          type: '',
          status: "",
          course_type: '',
          has_openid: '',
          page: 1,
          page_size: 10,
        },
        courseTypeList: [],
        list: [],
        year_total: 0,
        alltotal: 0,
        total: 0,
        searyear:'',
        table_item: [{
          prop: 'index',
          label: '',
          align: 'center',
          width: 50,
          fixed: 'left'
        }, {
          prop: 'course_list',
          label: '课程名称',
          align: 'left',
        }, {
          prop: 'username',
          label: '姓名',
          align: 'center',
          width: 120
        }, {
          prop: 'sex',
          label: '性别',
          align: 'center',
          width: 120
        }, {
          prop: 'no',
          label: '学号',
          align: 'center',
          width: 180
        },{
          prop: 'headimgurl',
          label: '头像',
          align: 'center',
          width: 100
        }, {
          prop: 'idcard',
          label: '身份证号',
          align: 'center',
          width: 180
        }, {
          prop: 'mobile',
          label: '联系方式',
          align: 'center',
          width: 120,
        }, {
          prop: 'birthday',
          label: '出生年月',
          align: 'center',
          width: 120,
        }, {
          prop: 'email',
          label: '邮箱',
          align: 'center',
          width: 120,
        }, {
          prop: 'company_name',
          label: '公司名称',
          align: 'left',
          width: 200
        }, {
          prop: 'company_position',
          label: '职务',
          align: 'center',
          width: 120,
        }, {
          prop: 'is_schoolmate',
          label: '是否校友库学员',
          align: 'center',
          width: 120,
        }, {
          prop: 'is_vip',
          label: '学员身份',
          align: 'center',
          width: 120,
        }, {
          prop: 'is_wx',
          label: '是否绑定小程序',
          align: 'center',
          width: 120,
        }]

      }
    },
    created() {
      this.getList()
      this.getCourseType()
    },
    methods: {
      changeSelectType(e, selectName) {
        if (e) {
          this.select[selectName] = e.join(",")
        } else {
          this.select[selectName] = ''
        }
      },
      changeCompanyDates(e) {
        if (e) {
          this.select.start_company_date = e[0]
          this.select.end_company_date = e[1]
        } else {
          this.select.start_company_date = ''
          this.select.end_company_date = ''
        }
      },
      changeBirthdayDates(e) {
        if (e) {
          this.select.start_birthday = e[0]
          this.select.end_birthday = e[1]
        } else {
          this.select.start_birthday = ''
          this.select.end_birthday = ''
        }
      },

      pageIndexChange(e) {
        this.select.page = e
        this.getList()
      },
      pageSizeChange(e) {
        this.select.page_size = e
        this.select.page = 1
        this.getList()
      },
      getIndex(e) {
        let perSize = (this.select.page - 1) * this.select.page_size
        let index = perSize + e + 1
        return index
      },
      resetSelect() {
        this.companyType = []
        this.typeSelect = []
        this.educationType = []
        this.companyIndustry = []
        this.companyArea = []
        this.select.keyword = ''
        this.select.name = ''
        this.select.year = ''
        this.select.mobile = ''
        this.select.company_name = ''
        this.select.school = ''
        this.select.company_has_share = ''
        this.select.company_need_fund = ''
        this.select.start_company_date = ''
        this.select.start_birthday = ''
        this.birthdayDates = []
        this.select.end_birthday = ''
        this.select.end_company_date = ''
        this.companyDates = []
        this.select.course_name = ''
        this.select.company_position = ''
        this.select.company_area = ''
        this.select.company_type = ''
        this.select.company_industry = ''
        this.select.is_vip = ''
        this.select.courses_end_date = ''
        this.select.is_schoolmate = ''
        this.select.education = ''
        this.select.type = ''
        this.select.status = ''
        this.select.course_type = ''
        this.select.has_openid = ''
        this.select.page = 1
        this.getList()
      },
      async getList() {
        const res = await indexStudy({
          page: this.select.page,
          page_size: this.select.page_size,
          keyword: this.select.keyword,
          name: this.select.name,
          year:this.select.year?this.select.year:'',
          mobile: this.select.mobile,
          company_name: this.select.company_name,
          school: this.select.school,
          start_birthday: this.select.start_birthday,
          end_birthday: this.select.end_birthday,
          start_company_date: this.select.start_company_date,
          end_company_date: this.select.end_company_date,
          course_name: this.select.course_name,
          company_has_share: this.select.company_has_share,
          company_need_fund: this.select.company_need_fund,
          company_position: this.select.company_position,
          company_area: this.select.company_area,
          company_type: this.select.company_type,
          company_industry: this.select.company_industry,
          is_vip: this.select.is_vip,
          courses_end_date: this.select.courses_end_date,
          is_schoolmate: this.select.is_schoolmate,
          education: this.select.education,
          type: this.select.type,
          status: this.select.status,
          has_openid: this.select.has_openid,
          course_type: this.select.course_type
        })
        this.list = res.list.data
        this.total = res.list.total
        this.year_total = res.year_total
        this.alltotal = res.total
        this.searyear = this.select.year?this.select.year:''
      },
      changeDate(e) {
        if (e) {
          this.select.courses_end_date = e
        } else {
          this.select.courses_end_date = ''
        }
      },
      showDetail(type, id) {
        this.$refs.studentDetail.id = id
        this.$refs.studentDetail.type = type
        this.$refs.studentDetail.isShow = true
      },
      exportExcel() {
        let _export = {
          'all_course': '课程名称'
        }
        this.selectFormList.map(item => {
          if (item.prop === 'index') {

          } else {
            _export[item.field] = item.name
          }
        })
        download(
          '/api/admin/users/study',
          'get', {
            export_fields: _export,
            keyword: this.select.keyword,
            name: this.select.name,
            year:this.select.year?this.select.year:'',
            mobile: this.select.mobile,
            company_name: this.select.company_name,
            school: this.select.school,
            start_birthday: this.select.start_birthday,
            end_birthday: this.select.end_birthday,
            start_company_date: this.select.start_company_date,
            end_company_date: this.select.end_company_date,
            course_name: this.select.course_name,
            company_has_share: this.select.company_has_share,
            company_need_fund: this.select.company_need_fund,
            company_position: this.select.company_position,
            company_area: this.select.company_area,
            company_type: this.select.company_type,
            company_industry: this.select.company_industry,
            is_vip: this.select.is_vip,
            courses_end_date: this.select.courses_end_date,
            is_schoolmate: this.select.is_schoolmate,
            education: this.select.education,
            type: this.select.type,
            status: this.select.status,
            course_type: this.select.course_type,
            has_openid: this.select.has_openid,
            is_export: 1,
            page: 1,
            page_size: 99999
          },
          `学员信息.xlsx`)
      },
      async getCourseType() {
        const res = await indexTypes({
          page: 1,
          page_size: 999
        })
        this.courseTypeList = res.data
      }
    }
  }
</script>

<style lang="scss" scoped>
  .txl {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;

    &>div {
      margin-right: 15px;

    }
  }

  .searchwrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    &>div,
    .selected-wrap {
      display: flex;
      align-items: center;
      // margin-bottom: 10px;
      flex-wrap: wrap;

      &>div {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 150px;

        &:last-child {
          width: auto
        }
      }

    }
  }
</style>
