<template>
  <div class="layout-no-flex" v-loading="dataLoading">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="save" :loading="saveLoading" priv="SocialMedia.MediaAccount.Edit"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>

    <el-row class="panel-card margin0 right-detail-toolbar">
      <el-col :span="4" :offset="3">
        <img :src="tmpMediaAccount.headImage ? tmpMediaAccount.headImage : (tmpMediaAccount.PCode ? `assets/images/socialmedia/${tmpMediaAccount.PCode.toLowerCase()}-logo.png` : 'assets/images/socialmedia/headimage/auto.jpg')" style="width: 114px; height: 114px; margin: 4px 17px; border: 1px solid #cccccc; border-radius: 50%;" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" :title="tmpMediaAccount.MName"/><br/><br/>
      </el-col>
      <el-col :span="13">
        <el-form :model="tmpMediaAccount" ref="mediaAccountForm" label-width="120px" label-suffix="：">
          <el-form-item prop="MName" label="名称" :verify="['NotNull']">
            <el-input v-model="tmpMediaAccount.MName"></el-input>
          </el-form-item>
          <el-form-item prop="AESToken" label="token" :verify="['NotNull']" v-if="tmpMediaAccount.PCode === 'WeChatAccount' || tmpMediaAccount.PCode === 'WeChatMedia'">
            <el-input v-model="tmpMediaAccount.AESToken"></el-input>
          </el-form-item>
          <el-form-item prop="typeID" label="分类" :verify="['NotNull']">
            <el-select v-model="tmpMediaAccount.typeID" style="width:100%;">
              <el-option v-for="item in accountTypes" :label="item.name" :value="item.ID" :key="item.ID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="留言管理" v-if="tmpMediaAccount.PCode === 'WeChatAccount'">
          <el-checkbox v-model="tmpMediaAccount.configProps.needOpenComment" :true-label="1" :false-label="0">推文允许留言</el-checkbox><span v-show="tmpMediaAccount.configProps.needOpenComment === 1" class="txt-comment-tips txt-warn">需确保公众号拥有留言管理功能</span>
          <div v-show="tmpMediaAccount.configProps.needOpenComment === 1">
            <el-radio-group v-model="tmpMediaAccount.configProps.onlyFansCanComment">
              <el-radio :label="0">所有人可留言</el-radio>
              <el-radio :label="1">仅关注后可留言</el-radio>
            </el-radio-group>
          </div>

        </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-toolbar>
      <el-button type="button" class="el-button el-button--default save" @click="add" priv="SocialMedia.MediaAccount.AddOptUser"><span><i class="fa fa-plus"></i>添加运营人员</span></el-button>
    </el-toolbar>
    <el-table :data="manageUsers" ref="dataTable" :data-read-url="`/ui/mediaaccounts/${ID}/operators`" :page-size="20">
      <el-table-column type="selection" width="50px"></el-table-column>
      <el-table-column type="index" width="80px" label="序号"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="realName" label="真实姓名"></el-table-column>
      <el-table-column prop="status" label="用户状态">
        <template slot-scope="scope">
          <i class="fa fa-check icon-success" title="启用" v-if="scope.row.status=='Y'"></i>
          <i class="fa fa-times icon-danger" title="停用" v-else></i>
        </template>
      </el-table-column>
      <el-table-column prop="branchInnerCodeName" label="所属机构"></el-table-column>
      <el-table-column prop="roleNames" label="所属角色"></el-table-column>
      <el-table-column width="60px" align="right" label="操作">
        <template slot-scope="scope">
          <el-button @click.stop="del(scope.row.userName)" type="text" priv="SocialMedia.MediaAccount.DelOptUser" title="删除">
            <i class="fa fa-remove f16"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
  <user-select-dialog title="修改运营人员" :userSelectShow.sync="userSelectModal" :toUsers="selectedUsers" @callback="userSelectCallback"></user-select-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import userSelectDialog from '../../platform/components/UserSelectDialog.vue'

export default {
  components: {
    userSelectDialog
  },
  props: {
    ID: [String, Number]
  },
  data() {
    return {
      dataLoading: true,
      saveLoading: false,
      tmpMediaAccount: {
        headImage: '',
        PCode: '',
        configProps: {
          needOpenComment: 0,
          onlyFansCanComment: 0
        }
      },
      manageUsers: [],
      accountTypes: [],
      selectedUsers: '',
      userSelectModal: false
    }
  },
  async created() {
    let res
    try {
      res = await Promise.all([axios.get(`/ui/mediaaccounts/${this.ID}`), axios.get('/ui/accounttypes')])
    } catch (e) {
      this.dataLoading = false
      return
    }
    let accountData = res[0].data.data
    accountData.configProps = Object.assign({ needOpenComment: 0, onlyFansCanComment: 0 }, JSON.parse(accountData.configProps))
    this.tmpMediaAccount = Object.assign({}, accountData)
    this.selectedUsers = res[0].data.selectedUsers
    this.accountTypes = res[1].data.data
    this.dataLoading = false
  },
  methods: {
    async save() {
      this.saveLoading = true
      try {
        await util.validateForm(this.$refs.mediaAccountForm)
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }
      let res
      try {
        res = await axios.put(`/ui/mediaaccounts/${this.ID}`, this.tmpMediaAccount)
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }
      util.showResponseMessage(res.data)
      this.saveLoading = false
    },
    async add() {
      this.userSelectModal = true
    },
    async userSelectCallback(users) {
      this.selectedUsers = users
      let res = await axios.post(`/ui/mediaaccounts/${this.ID}/operators`, {
        operateUsers: users
      })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$refs.dataTable.getData()
      }
    },
    async del(userName) {
      let res = await axios.delete(`/ui/mediaaccounts/${this.ID}/operators/${userName}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.selectedUsers = this.selectedUsers
          .split(',')
          .filter(val => val !== userName)
          .join(',')
        this.$refs.dataTable.getData()
      }
    }
  }
}
</script>

<style scoped>
.panel-card {
  padding: 50px;
}
.txt-comment-tips{
  margin-left:10px;
}
.txt-warn {
  color: #f56c6c;
}
</style>
