<template>
  <div>
    <el-drawer
      :title="drawerTitle + '变更信息'"
      :visible.sync="drawer"
      direction="ttb"
      :before-close="handleClose"
      size="620px"
    >
      <div class="app-container" style="padding-top: 0">
        <el-table
          :data="accountList"
          size="mini"
          border
          height="500px"
        >
          <el-table-column label="公众号" prop="account" width="300" fixed>
            <template slot-scope="scope">
              <el-row
                align="middle"
                type="flex"
                v-if="
                  scope.row.nickName || scope.row.userName || scope.row.appid
                "
              >
                <el-avatar
                  shape="square"
                  :size="62"
                  :src="scope.row.headImg"
                  @error="avatarErr"
                >
                  <img src="../../../../assets/image/book.jpg" />
                </el-avatar>
                <div class="verticalCenter">
                  <div>
                    <strong>{{ scope.row.nickName }}</strong>
                  </div>
                  <div class="child">
                    <span class="font12">原始ID：</span>{{ scope.row.userName
                    }}<i
                      v-if="scope.row.userName"
                      class="el-icon-document-copy copy"
                      @click="Copy(scope.row.userName)"
                    ></i>
                  </div>
                  <div class="child">
                    <span class="font12">APPID：</span>{{ scope.row.appid
                    }}<i
                      v-if="scope.row.appid"
                      class="el-icon-document-copy copy"
                      @click="Copy(scope.row.appid)"
                    ></i>
                  </div>
                </div>
              </el-row>
            </template>
          </el-table-column>
          <!-- <el-table-column label="APPID" prop="appid" align="center" width="120" /> -->
          <el-table-column prop="operUserInfo" width="100" align="center">
            <template slot="header">
              <div>
                运营
                <el-tooltip
                  effect="dark"
                  content="悬浮可显示号码"
                  placement="top"
                  ><i class="el-icon-question"></i
                ></el-tooltip>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.operUserInfo">
              <el-popover width="200" trigger="hover" placement="top">
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>{{ scope.row.operUserInfo.nickName }}电话：</strong>
                  {{ scope.row.operUserInfo.phonenumber }}
                </div>
                <div slot="reference">
                  {{ scope.row.operUserInfo.nickName }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="putUserInfo" width="100" align="center">
            <template slot="header">
              <div>
                投手
                <el-tooltip
                  effect="dark"
                  content="悬浮可显示号码"
                  placement="top"
                  ><i class="el-icon-question"></i
                ></el-tooltip>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.putUserInfo">
              <el-popover width="200" trigger="hover" placement="top">
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>{{ scope.row.putUserInfo.nickName }}电话：</strong>
                  {{ scope.row.putUserInfo.phonenumber }}
                </div>
                <div slot="reference">{{ scope.row.putUserInfo.nickName }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="administratorName" width="115" align="center">
            <template slot="header">
              <div>
                管理员信息
                <el-tooltip
                  effect="dark"
                  content="悬浮可显示详细信息"
                  placement="top"
                  ><i class="el-icon-question"></i
                ></el-tooltip>
              </div>
            </template>
            <template slot-scope="scope">
              <el-popover
                width="200"
                trigger="hover"
                placement="top"
                :title="scope.row.administratorName"
              >
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>电话号码：</strong> {{ scope.row.managePhone }}
                </div>
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>编号：</strong> {{ scope.row.managePhoneNo }}
                </div>
                <div slot="reference">{{ scope.row.administratorName }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="account" align="center" width="130">
            <template slot="header">
              <div>
                公众号账号信息
                <el-tooltip
                  effect="dark"
                  content="悬浮可显示公众号账号/密码"
                  placement="top"
                  ><i class="el-icon-question"></i
                ></el-tooltip>
              </div>
            </template>
            <template slot-scope="scope">
              <el-popover width="220" trigger="hover" placement="top">
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>账号：</strong> {{ scope.row.account }}
                </div>
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>密码：</strong> {{ scope.row.password }}
                </div>
                <div slot="reference" class="myElli">
                  {{ scope.row.account }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="公司主体"
            prop="principalName"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <div class="elli" v-if="scope.row.principalName">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.principalName"
                  placement="top"
                  :enterable="false"
                >
                  <span>{{ scope.row.principalName }}</span>
                </el-tooltip>
                <i
                  class="el-icon-document-copy copy"
                  @click="Copy(scope.row.principalName)"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="授权状态"
            prop="authStatus"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.authStatus === 0 ? 'success' : 'danger'"
                >{{ scope.row.authStatus === 0 ? "已授权" : "未授权" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            label="运营状态"
            prop="approveStatus"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.approveStatus == 0"
                >待分配</el-tag
              >
              <el-tag type="success" v-else-if="scope.row.approveStatus == 1"
                >投放中</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.approveStatus == 2"
                >停投</el-tag
              >
              <el-tag type="danger" v-else-if="scope.row.approveStatus == 3"
                >已停运</el-tag
              >
              <div v-else>--</div>
            </template>
          </el-table-column>

          <el-table-column prop="platformInfo" width="100" align="center">
            <template slot="header">
              <div>
                书城信息
                <el-tooltip
                  effect="dark"
                  content="悬浮可显示书城账号密码"
                  placement="top"
                  ><i class="el-icon-question"></i
                ></el-tooltip>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.platformInfo">
              <el-popover
                width="200"
                trigger="hover"
                placement="top"
                :title="scope.row.platformInfo.platformName"
              >
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>账号：</strong>
                  <span v-if="scope.row.platformAccount">{{
                    scope.row.platformAccount
                  }}</span>
                </div>
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>密码：</strong>
                  <span v-if="scope.row.platformPassword">{{
                    scope.row.platformPassword
                  }}</span>
                </div>
                <div slot="reference">
                  {{ scope.row.platformInfo.platformName }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="期数"
            prop="platformInfo"
            width="100"
            align="center"
          >
            <template slot-scope="scope" v-if="scope.row.platformInfo">
              <div class="verticalCenter" v-if="scope.row.platformInfo">
                <div v-if="scope.row.platformInfo.vipAccounts.length > 0">
                  {{ scope.row.platformInfo.vipAccounts[0].periodInfo.period }}
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="platformInfo" align="center" width="110">
            <template slot="header">
              <div>
                VIP账号信息
                <el-tooltip
                  effect="dark"
                  content="悬浮可显示VIP账号详细信息"
                  placement="top"
                  ><i class="el-icon-question"></i
                ></el-tooltip>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.platformInfo">
              <el-popover
                width="220"
                trigger="hover"
                placement="top"
                v-if="
                  scope.row.platformInfo.vipAccounts &&
                  scope.row.platformInfo.vipAccounts.length > 0
                "
              >
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>账号：</strong
                  >{{ scope.row.platformInfo.vipAccounts[0].account }}
                </div>
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>密码：</strong
                  >{{ scope.row.platformInfo.vipAccounts[0].password }}
                </div>
                <div style="color: rgb(136, 136, 136); font-size: 13px">
                  <strong>网址：</strong
                  >{{ scope.row.platformInfo.vipAccounts[0].link }}
                </div>
                <div slot="reference">
                  {{ scope.row.platformInfo.vipAccounts[0].account }}
                </div>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column
            label="当前书籍"
            prop="bookName"
            width="120"
            align="center"
          />
          <el-table-column
            label="所属组"
            prop="group"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.adminGroupInfo">
                {{ scope.row.adminGroupInfo.groupName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="认证/到期时间"
            prop="authTime"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.authTime }}</div>
              <div style="color: red">{{ scope.row.authTimeout }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-tickets"
                @click="editChange(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "accountUpdate",
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    drawerTitle: {
      type: String,
      default: "",
    },
    drawerId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      total: 0,
      accountList: []
    };
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    editChange(row) {

    }
  },
};
</script>