<template>
  <el-row>
    <el-row>
      <white-board>
        <el-row><el-divider content-position="left">基本信息</el-divider></el-row>

        <el-row style="padding: 10px 20px 0px 20px">
          <el-form ref="form" :model="form" :rules="formRules" label-width="100px">
            <!--            <el-form-item label="租户Id" prop="tenantId">
                          <el-input v-model.trim="form.tenantId" placeholder="请输入租户Id" maxlength="64" show-word-limit clearable></el-input>
                        </el-form-item>-->
            <el-form-item label="名称" prop="organName">
              <el-input v-model.trim="form.organName" placeholder="请输入名称" show-word-limit clearable />
            </el-form-item>
            <el-form-item label="总店名称" prop="mainName">
              <el-input v-model.trim="form.mainName" placeholder="请输入总店名称" clearable />
            </el-form-item>
            <el-form-item label="店长姓名" prop="managerName">
              <el-input v-model.trim="form.managerName" placeholder="请输入店长姓名" clearable />
            </el-form-item>
            <el-form-item label="手机号码" prop="managerNumber">
              <el-input v-model.trim="form.managerNumber" placeholder="请输入手机号码" clearable />
            </el-form-item>
            <el-form-item label="机构号码" prop="organNumber">
              <el-input v-model.trim="form.organNumber" placeholder="请输入机构号码" clearable />
            </el-form-item>
            <el-form-item label="简介" prop="content">
              <el-input v-model.trim="form.content" placeholder="请输入号码" clearable />
            </el-form-item>
            <el-form-item label="logo" prop="organLogo" style="text-align: left;">
              <upload-img v-model="form.organLogo" />
            </el-form-item>
            <el-form-item label="简介图片" prop="contentUrl" style="text-align: left;">
              <upload-img v-model="form.contentUrl" />
            </el-form-item>
          </el-form>
        </el-row>

        <el-row><el-divider content-position="left">操作</el-divider></el-row>

        <el-row style="text-align: right;">
          <el-button type="primary" plain @click="handleSave">保存</el-button>
        </el-row>
      </white-board>
    </el-row>

    <white-board>
      <el-row><el-divider content-position="left">分校</el-divider></el-row>

      <el-row style="text-align: right;">
        <el-button icon="el-icon-plus" type="success" plain @click="openAddSchool">新增</el-button>
      </el-row>

      <el-row>
        <el-table :data="tableData.list" style="width: 100%;" highlight-current-row stripe>
          <el-table-column label="所在地" fixed>
            <template slot-scope="scope">{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}</template>
          </el-table-column>
          <el-table-column label="详细地址" fixed>
            <template slot-scope="scope">{{ scope.row.address }}</template>
          </el-table-column>
          <el-table-column label="联系方式" fixed>
            <template slot-scope="scope">{{ scope.row.number }}</template>
          </el-table-column>
          <el-table-column label="开始营业时间" fixed>
            <template slot-scope="scope">{{ scope.row.startTime }}</template>
          </el-table-column>
          <el-table-column label="结束营业时间" fixed>
            <template slot-scope="scope">{{ scope.row.endTime }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="openSaveSchool(scope.row)">编辑</el-button>
              <el-button type="danger" plain @click="deleteSchool(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </white-board>

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

      <el-row>
        <el-col :span="18" :offset="3">
          <el-form ref="schoolForm" :model="schoolForm" :rules="schoolFormRules" label-width="80px">
            <el-form-item label="省市区">
              <el-row style="text-align: left">
                <v-distpicker :province="schoolForm.province" :city="schoolForm.city" :area="schoolForm.area" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" />
              </el-row>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model.trim="schoolForm.address" placeholder="请输入详细地址" show-word-limit clearable />
            </el-form-item>
            <el-form-item label="联系方式" prop="number">
              <el-input v-model.trim="schoolForm.number" placeholder="请输入联系方式" clearable />
            </el-form-item>
            <el-form-item label="报名时间" prop="openTime">
              <el-time-picker
                v-model="openTime"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider />
        <el-button @click="schoolDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveSchool">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import VDistpicker from 'v-distpicker'
import UploadImg from '@/components/common/upload/upload-img'
import organApi from '@/api/organ/organApi'

export default {
  name: 'OrganIndex',
  components: {
    'upload-img': UploadImg,
    VDistpicker
  },
  data() {
    return {
      form: {
        id: '',
        organName: '',
        mainName: '',
        managerName: '',
        managerNumber: '',
        organNumber: '',
        content: '',
        contentUrl: '',
        organLogo: '',
        tenantId: ''
      },
      formRules: {
        organName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
        mainName: [{ required: true, message: '请输入总店名称', trigger: 'blur' }],
        managerName: [{ required: true, message: '请选择店长姓名', trigger: 'blur' }],
        managerNumber: [{ required: true, message: '请选择手机号码', trigger: 'blur' }],
        organNumber: [{ required: true, message: '请选择机构号码', trigger: 'blur' }],
        content: [{ required: true, message: '请选择机构简介', trigger: 'blur' }]
      },

      tableData: [],
      dialogTitle: '',
      schoolDialogVisible: false,
      openTime: ['09:00', '21:00'],
      schoolForm: {
        id: '',
        province: '广东省',
        city: '广州市',
        area: '番禺区',
        address: '',
        number: '',
        startTime: '',
        endTime: '',
        organId: ''
      },
      schoolFormRules: {
        address: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
        number: [{ required: true, message: '请输入总店名称', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择店长姓名', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择手机号码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    onChangeProvince(e) {
      this.schoolForm.province = e.value
    },
    onChangeCity(e) {
      this.schoolForm.city = e.value
    },
    onChangeArea(e) {
      this.schoolForm.area = e.value
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }

        this.tableData.organName = this.form['organName']
        this.tableData.mainName = this.form['mainName']
        this.tableData.managerName = this.form['managerName']
        this.tableData.managerNumber = this.form['managerNumber']
        this.tableData.organNumber = this.form['organNumber']
        this.tableData.content = this.form['content']
        this.tableData.contentUrl = this.form['contentUrl']
        this.tableData.organLogo = this.form['organLogo']

        organApi.saveOrUpdate(this.tableData).then(data => {
          this.list()
          this.$refs['form'].resetFields()
          this.$message({ message: '操作成功', type: 'success' })
        })
      })
    },
    openAddSchool() {
      this.schoolForm = {
        id: '',
        province: '广东省',
        city: '广州市',
        area: '番禺区',
        address: '',
        number: '',
        startTime: '',
        endTime: '',
        organId: this.form.id
      }

      this.dialogTitle = '新增'
      this.schoolDialogVisible = true
    },
    openSaveSchool(row) {
      this.openTime = ['00:00', '00:00'] // 玄学

      Object.assign(this.schoolForm, row)
      this.openTime[0] = row.startTime
      this.openTime[1] = row.endTime

      this.dialogTitle = `编辑`
      this.schoolDialogVisible = true
    },
    deleteSchool(row) {
      organApi.delete(row.id).then(data => {
        this.list()
      })
    },
    handleSaveSchool() {
      this.tableData.list.forEach(item => {
        if (item.id === this.schoolForm.id) {
          item.province = this.schoolForm.province
          item.city = this.schoolForm.city
          item.area = this.schoolForm.area
          item.address = this.schoolForm.address
          item.number = this.schoolForm.number
          item.startTime = this.openTime[0]
          item.endTime = this.openTime[1]
          item.organId = this.form.id
        }
      })

      if (this.dialogTitle === '新增') {
        this.schoolForm.startTime = this.openTime[0]
        this.schoolForm.endTime = this.openTime[1]
        this.tableData.list.push(this.schoolForm)
      }

      organApi.saveOrUpdate(this.tableData).then(data => {
        this.list()

        this.schoolDialogVisible = false
        this.$refs['form'].resetFields()
      })
    },
    list() {
      this.tableData = []
      organApi.findOrgan('1').then(data => {
        this.tableData = data
        this.form['id'] = this.tableData.id
        this.form['organName'] = this.tableData.organName
        this.form['mainName'] = this.tableData.mainName
        this.form['managerName'] = this.tableData.managerName
        this.form['managerNumber'] = this.tableData.managerNumber
        this.form['organNumber'] = this.tableData.organNumber
        this.form['content'] = this.tableData.content
        this.form['contentUrl'] = this.tableData.contentUrl
        this.form['organLogo'] = this.tableData.organLogo
        this.form['tenantId'] = this.tableData.tenantId
      })
    }
  }
}
</script>

<style scoped>
  /deep/ .distpicker-address-wrapper select{
    padding: 0px;
    height: 28px;
    color: #606266;
    font-size: 0.5rem;line-height: 0.3
  }
</style>
