<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>
                <div>
                  <el-input v-model="select.name" placeholder="请输入姓名"></el-input>
                </div>
                <div>
                  <el-input v-model="select.company_name" 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 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_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,index) in formSelect.company_type" :key="index" :label="item"
                                                      :value="item">
                                                    </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="updateSchoolmates(0)">批量取消黑名单</el-button>
                </div>
              </div>

            </div>
          </div>

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

    <div>
      <xy-table :list="list" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange" :showIndex="false"
        @selection-change="selectionChange" :total="total" :table-item="table_item">
        <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="380" 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-for="item in is_schoolmate_list">
                <div v-if="scope.row.is_vip===item.id">{{item.value}}</div>
              </div> -->
              <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="180" header-align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit('editor',scope.row.id)">编辑</el-button>

              <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>
    <editDetail ref="editDetail" @refresh="getList"></editDetail>
    <imports ref="imports" :table-name="'users'" @refresh="getList"></imports>

  </div>
</template>

<script>
  import studentDetail from './components/detail.vue';
  import editDetail from './components/editDetail.vue';

  import myMixins from "@/mixin/selectMixin.js";
  import formMixin from "@/mixin/formMixin.js";
  import {
    indexStudy,
    updateSchoolmate
  } from '@/api/student/index.js'
  import imports from "@/views/component/imports.vue"
  import {
    index as indexTypes
  } from "@/api/course/courseType.js"
  export default {
    mixins: [myMixins, formMixin],
    components: {
      studentDetail,
      editDetail,
      imports
    },
    data() {
      return {
        path: '',
        // 多选 获取
        companyDates: [],
        birthdayDates: [],
        companyType: [],
        typeSelect: [],
        educationType:[],
        companyIndustry:[],
        companyArea:[],
        select: {
          keyword: '',
          name: '',
          year:'',
          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: '',
          is_black: 1,
          courses_end_date: '',
          education: '',
          type: '',
          status: "",
          course_type: '',
          has_openid:'',
          page: 1,
          page_size: 10,
        },
        courseTypeList: [],
        list: [],
        total: 0,
        seleSchoolmates: [],
        table_item: [{
          type: 'selection',
          width: 50,
          fixed: 'left'
        }, {
          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.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 = ''
        }
      },

      importTable(row) {
        // this.$refs.imports.tableData = {
        //   'data[course_id]': row.course_id,
        //   'data[course_content_id]': row.id
        // }
        this.$refs.imports.show()

        // {"course_id":15,"course_content_id":188}
      },
      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.is_black = 1
        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,
          is_black: this.select.is_black,
          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
      },
      changeDate(e) {
        if (e) {
          this.select.courses_end_date = e
        } else {
          this.select.courses_end_date = ''
        }
      },
      // 批量设置校友库
      selectionChange(e) {
        console.log(e)
        this.seleSchoolmates = e
      },
      // 批量取消黑名单
      updateSchoolmates(vip) {
        if (this.seleSchoolmates.length > 0) {
          // 简单的确认对话框
          this.$confirm(
            `确定要将选中的 ${this.seleSchoolmates.length} 名学员从黑名单中移除吗？`,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            // 直接提交，将is_black改为0，is_schoolmate传空
            this.submitUpdateSchoolmates();
          }).catch(() => {
            // 用户取消操作
            console.log('用户取消了操作');
          });
        } else {
          this.$Message.warning("请先选择学员")
          return
        }
      },
      // 提交更新黑名单状态
      submitUpdateSchoolmates() {
        let ids = []
        this.seleSchoolmates.map(item => {
          ids.push(item.id)
        })

        updateSchoolmate({
          is_schoolmate: '', // 传空
          ids: ids.join(','),
          is_black: 0 // 改为0，取消黑名单
        }).then(res => {
          this.$Message.success(`批量取消黑名单成功，共处理 ${this.seleSchoolmates.length} 名学员`)
          this.getList()
        }).catch(error => {
          this.$Message.error("批量取消黑名单失败：" + (error.message || '未知错误'))
        })
      },
      edit(type, id) {
        this.$refs.editDetail.id = id
        this.$refs.editDetail.type = type
        this.$refs.editDetail.isShow = true
      },
      showDetail(type, id) {
        this.$refs.studentDetail.id = id
        this.$refs.studentDetail.type = type
        this.$refs.studentDetail.isShow = true
      },
      async getCourseType() {
        const res = await indexTypes({
          page: 1,
          page_size: 999
        })
        this.courseTypeList = res.data
      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchwrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &>div,.selected-wrap {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

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

        &:last-child {
          width: auto
        }
      }

    }
  }
</style>
