<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <!-- <el-col :span="2"><label class="search-label">机构</label></el-col>
              <el-col :span="5">
                <select-organ v-model="searchForm.organId" />
              </el-col> -->
            </el-row>
          </div>
          <div slot="more">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">账号标识</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.id" placeholder="请输入账号标识" clearable /></el-col>
              <el-col :span="2" :offset="1"><label class="search-label">微信昵称</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.nickname" placeholder="请输入微信昵称" clearable /></el-col>
            </el-row>
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">小孩姓名</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.childName" placeholder="请输入小孩姓名" clearable /></el-col>
              <el-col :span="2" :offset="1"><label class="search-label">手机号码</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.phoneNumber" placeholder="请输入手机号码" clearable /></el-col>
            </el-row>
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">学校</label></el-col>
              <el-col :span="5">
                <select-school v-model="searchForm.schoolId" :clearable="true" :filterable="true" @change="list" />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">年级</label></el-col>
              <el-col :span="5">
                <el-select v-model="searchForm.gradeName" placeholder="请选择年级" clearable filterable style="width: 100%;" @change="list">
                  <el-option v-for="item in constants.GRADE_NAME_LIST" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">班级</label></el-col>
              <el-col :span="5">
                <el-select v-model="searchForm.className" placeholder="请选择班级" clearable filterable style="width: 100%;" @change="list">
                  <el-option v-for="item in constants.CLASS_NAME_LIST" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
            <el-table-column prop="id" label="标识" width="160" />
            <el-table-column label="家长微信昵称" width="150">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="openCourseItemView(scope.row.id)">{{ scope.row.nickname }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="家长微信头像" width="100">
              <template slot-scope="scope">
                <img :src="scope.row.avatarUrl" width="33">
              </template>
            </el-table-column>
            <el-table-column label="小孩信息" align="center">
              <el-table-column label="小孩姓名" width="75">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    {{ child.childName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="家长手机号码" width="120">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    {{ child.phoneNumber | fmtPhoneNumber }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="课后回家方式" width="100">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    {{ child.goHome }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="学校">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    {{ child.schoolName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="年级" width="70">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    {{ child.gradeName | formatGradeName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="班级" width="70">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    {{ child.className | formatClassName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="75">
                <template slot-scope="scope">
                  <div v-for="(child, index) in scope.row.guardianChildList" :key="index">
                    <el-button type="primary" plain @click="handleEdit(scope.$index, child, scope.row.nickname)">编辑</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" width="75" fixed="right">
              <template slot-scope="scope">
                <el-button type="success" plain @click="handleAdd(scope.$index, scope.row, scope.row.nickname)">新增</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="50"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            small
            @size-change="changeSizeChange"
            @current-change="changeCurrentChange"
          />
        </el-row>
      </white-board>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
      <el-divider />
      <label slot="title" style="float: left;">{{ dialogTitle }}</label>

      <el-row>
        <el-col :span="18" :offset="3">
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
            <el-form-item label="小孩姓名" prop="childName">
              <el-input v-model.trim="form.childName" placeholder="请输入小孩姓名" maxlength="64" show-word-limit clearable />
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input v-model.trim="form.phoneNumber" type="number" placeholder="请输入手机号码" clearable />
            </el-form-item>
            <el-form-item label="学校" prop="schoolId">
              <select-school v-model="form.schoolId" :filterable="true" @change="handleChangeSchool" />
            </el-form-item>
            <el-form-item label="年级名称" prop="gradeName">
              <el-select v-model="form.gradeName" placeholder="请选择年级" filterable style="width: 100%;">
                <el-option v-for="item in constants.GRADE_NAME_LIST" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="班级名称" prop="className">
              <el-select v-model="form.className" placeholder="请选择班级" filterable style="width: 100%;">
                <el-option v-for="item in constants.CLASS_NAME_LIST" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="课后回家方式" prop="className">
              <el-select v-model="form.goHome" placeholder="请选择方式" filterable style="width: 100%;">
                <el-option v-for="item in constants.GO_HOME_LIST" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider />
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看家长所报读的课程 -->
    <course-item-drawer v-model="isShowCourseItemDrawer" :open-course="guardianId" @close="isShowCourseItemDrawer = false" />
  </el-row>
</template>

<script>
import { SelectSchool } from '@/components/school'
import { SelectOrgan } from '@/components/organ'
import CourseItemDrawer from './course-item-drawer'
import guardianApi from '@/api/guardian/guardianApi'

export default {
  name: 'AccountIndex',
  components: {
    'select-school': SelectSchool,
    'select-organ': SelectOrgan,
    'course-item-drawer': CourseItemDrawer
  },
  data() {
    return {
      searchForm: {
        id: '', // 账号标识
        nickname: '', // 微信昵称

        childName: '',
        phoneNumber: '',
        schoolId: '',
        gradeName: '',
        className: '',

        page: 1,
        size: 50
      },
      total: 0,
      tableData: [],
      guardianId: '',
      isShowCourseItemDrawer: false,
      dialogTitle: '',
      dialogVisible: false,
      form: {
        id: '', // 此为GuardianChild的标识
        guardianId: '',
        phoneNumber: '',
        childName: '',
        schoolId: '',
        schoolName: '',
        gradeName: '',
        className: '',
        goHome: ''
      },
      formRules: {
        childName: [{ required: true, message: '请输入小孩姓名', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        schoolId: [{ required: true, message: '请选择学校', trigger: 'blur' }],
        gradeName: [{ required: true, message: '请选择年级名称', trigger: 'blur' }],
        className: [{ required: true, message: '请选择班级名称', trigger: 'blur' }],
        goHome: [{ required: true, message: '请选择课后回家方式', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    handleAdd(index, row, nickname) {
      this.form['id'] = ''
      this.form['guardianId'] = row.id
      this.form['childName'] = ''
      this.form['phoneNumber'] = ''
      this.form['schoolId'] = ''
      this.form['schoolName'] = ''
      this.form['gradeName'] = ''
      this.form['className'] = ''
      this.form['goHome'] = ''

      this.dialogTitle = `新增（家长微信昵称：[${nickname || ''}]）`
      this.dialogVisible = true
    },
    handleEdit(index, row, nickname) {
      this.form['id'] = row.id
      this.form['guardianId'] = row.guardianChildIdId
      this.form['childName'] = row.childName
      this.form['phoneNumber'] = row.phoneNumber
      this.form['schoolId'] = row.schoolId
      this.form['schoolName'] = row.schoolName
      this.form['gradeName'] = row.gradeName
      this.form['className'] = row.className
      this.form['goHome'] = row.goHome

      this.dialogTitle = `编辑（家长微信昵称：[${nickname || ''}]）`
      this.dialogVisible = true
    },
    handleChangeSchool(o) {
      if (o) {
        this.form['schoolId'] = o.id
        this.form['schoolName'] = o.name
      } else {
        this.form['schoolId'] = ''
        this.form['schoolName'] = ''
      }
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        console.log(this.form)
        guardianApi.childRelation(this.form).then(data => {
          this.list()
          this.dialogVisible = false
          this.$refs['form'].resetFields()
        })
      })
    },
    list() {
      this.tableData = []
      guardianApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.list()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.list()
    },
    openCourseItemView(row) {
      this.isShowCourseItemDrawer = true
      this.guardianId = row
    }
  }
}
</script>

<style scoped>
</style>
