<template>
  <div class="house-list">
    <tables
      :buttonList="buttonList"
      :data-api="dataApi"
      :deleteApi="toDel"
      :columns="columns"
      @toEdit="toEdit"
      @create="authShow = true"
      placeholder="账号名称"
      ref="table"
    />

    <CModal :show="show" title="讲解员信息" :width="420" @submit="updateUser" @close="closeModal">
      <Form :label-width="100">
        <FormItem label="讲解员ID">
          <p>{{form.viewerId}}</p>
        </FormItem>
        <FormItem label="讲解员名称">
          <Input size="large" v-model="form.name" />
        </FormItem>
        <FormItem label="公司名称">
          <Input size="large" v-model="form.companyName" />
        </FormItem>
        <FormItem label="手机号码">
          <Input size="large" v-model="form.phoneNum" />
        </FormItem>
        <FormItem label="头像">
          <picUpload  class="pic-upload" tips="只能上传jpg/png文件，且不超过500kb" ref="post-upload" :limit="1" :multiple="false" :preUploads="postPreUploads" :hasUploads="postHasUploads" />
        </FormItem>
      </Form>
    </CModal>

    <CModal :show="authShow" title="新增讲解员" :width="640" @submit="authSubmit" @close="authClose">
      <UserList @selected="s => selectViews = s" />
    </CModal>

  </div>
</template>

<script>
import picUpload from '@/components/upload'
import UserList from './userList'
import tables from 'components/tables'
import { fetchGuidList, updateGuide, updateViewerToGuide } from 'api/'
import CModal from 'components/Modal'

const roleMap = {
  0: '超级管理员',
  1: '普通管理员',
  2: '讲解员',
}
export default {
  data() {
    return {
      postPreUploads: [],
      postHasUploads: [],
      buttonList: [
        {
          text: '新增',
          handle: 'create'
        }
      ],
      authShow: false,
      show: false,
      form: {},
      // 传递给tables的表格列数据
      dataApi: fetchGuidList,
      roleList: [],
      columns: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80
        },
        {
          title: '头像',
          key: 'avatar',
          align: 'center',
          render: (h, params) => {
            return h('img', {
              domProps: {
                src: params.row.avatar,
                className: 'avatar'
              }
            })
          }
        },
        {
          title: 'ID',
          key: 'viewerId',
          align: 'center'
        },
        {
          title: '讲解员名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '公司名称',
          key: 'companyName',
          align: 'center'
        },
        {
          title: '手机号码',
          key: 'phoneNum',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          render: (h, params) => h('p', params.row.createTime.replace('T', ' '))
        },
        {
          title: '操作',
          slot: 'action',
          tools: ['edit', 'del'],
          align: 'center'
        }
      ],
      selectViews: []
    }
  },
  components: {
    UserList,
    picUpload,
    tables,
    CModal
  },
  mounted () {
  },
  methods: {
    authClose() {
      this.selectViews = []
      this.authShow = false
    },
    async authSubmit() {
      this.authShow = false
      let ps = this.selectViews.map(id => updateViewerToGuide(id))

      await Promise.all(ps)
      
      this.$refs['table'].handleTableData()
    },
    async changeUser (msg = '修改成功') {
      if (this.postPreUploads.length) {
        let fs = await this.$refs['post-upload'].uploadfiles()
        this.form.avatar = fs[0]
      }
      
      await updateGuide(this.form)
      this.closeModal()
      this.$Message.success({
        content: msg
      })
    },
    async updateUser() {
      await this.changeUser()
      setTimeout(() => {
        this.$refs['table'].handleTableData()
      }, 200)
    },
    toEdit (row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.postHasUploads =  [{img: this.form.avatar}]
      this.show = true
    },
    toDel(row) {
      row[0].enable = 0
      this.toEdit(row[0])
      this.show = false
      this.enable = 0
      this.changeUser('删除成功')
    },
    closeModal () {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.house-list {
  padding: 20px;
  background: #252828;
}
</style>

<style>
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.pic-upload .tips {
  bottom: auto;
}
</style>