<template>
    <div class="prepare-meeting">
        <div class="dashboard-item">
            <div class="header"><span>患者MDT团队</span><div><el-button :disabled="!(topObj.isPower >0 && topObj.isPower < 4 && (step == 0) && topObj.isRoute)" :class="{'text-gray': !(topObj.isPower >0 && topObj.isPower < 4 && (step == 0||step == 6))}" type="text" @click="editTeam">组建及管理</el-button></div></div>
            <div class="container" ref="teamTable">
                <el-table
                    :height="tableHeight"
                    :data="memberList"
                    :header-cell-style="mdtTheadClass"
                    :cell-style="mdtTrowClass"
                    style="width: 100%">
                    <el-table-column
                        prop="doctorName"
                        label="姓名"
                        min-width="120">
                        <template slot-scope="scope">
                            <span>{{ scope.row.doctorName }}</span>
                            <el-tag
                            v-if="scope.row.status === 9"
                            style="margin-left: 5px"
                            type="success"
                            size="mini"
                            >外院</el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="role"
                        label="职务"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        prop="deptName"
                        label="科室">
                    </el-table-column>
                    <el-table-column
                        prop="specialty"
                        label="专业">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="dashboard-item">
            <div class="header"><span>患者当前治疗方案</span><div></div></div>
            <!-- <div class="container">
                <div class="info">
                    <div>
                        <p>方案时间</p>
                        <el-select v-model="value" placeholder="请选择" size="mini">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <p>方案时间</p>
                        <span class="text">肺腺癌</span>
                    </div>
                    <div>
                        <p>确诊时间</p>
                        <span class="text">2020/03/17</span>
                    </div>
                    <div>
                        <p>方案状态</p>
                        <el-tag>执行中</el-tag>
                    </div>
                </div>
                <el-table
                    max-height="300"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址">
                    </el-table-column>
                </el-table>
            </div> -->
        </div>
        <!--团队组建弹窗-->
        <team-dialog @change="memberChange" ref="teamDialog2"/>
    </div>
</template>
<script>
import {
  getMdtMember,
} from "@/request/mdt.js";
import teamDialog from '../components/teamDialog.vue'
import mixin from "aegle-sp-components/src/mixin/mdtDashbord.js";
export default {
    components: {teamDialog},
    props: {
        step: [Number, String],
        // patientId: [Number, String],
    },
    inject: ['topObj'],
    mixins: [mixin],
    data () {
        return {
            options: [{
            value: '选项1',
            label: '黄金糕'
            }],
            memberList: [],
            tableHeight: 335,
        }
    },
    watch: {
        'topObj.patientId'(v) {
            if(v) this.getMemberList()
        },
    },
    created() {
        this.$nextTick(() => {
            this.tableHeight = this.$refs.teamTable.offsetHeight;
            this.$forceUpdate()
        })
    },
    mounted() {
        this.getMemberList()
    },
    methods: {
        // mdt团队列表
        async getMemberList() {
            const res = await getMdtMember(this.topObj?.patientId);
            if (res.code === 0) {
                this.memberList = res.data;
            } else {
                this.$message.error(res.msg);
                this.memberList = [];
            }
        },
        editTeam() {
            if(!(this.topObj?.isPower >0 && this.topObj?.isPower < 4 && (this.step < 2 || this.step == 6))) return;
            this.$refs.teamDialog2.open({list: this.memberList, status: true,patientId: this.topObj?.patientId,mdtId: this.topObj?.mdtId})
        },
        memberChange(){
            this.getMemberList()
            this.$emit('refresh')
        }
      }
    }
  </script>
<style lang="less" scoped>
.prepare-meeting {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #e6e7ec;
    .dashboard-item {
        flex: 1;
        margin-top: 12px;
        background: #ffffff;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        &:first-child {
            margin-top: 0;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 0 0 56px;
            height: 56px;
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(0,0,0,0.85);
            padding: 0 20px;
            .el-button {
                text-decoration: underline;
            }
            >div {
                display: inline-block;
            }
        }

        .container {
            flex: 1 1 auto;
            height: 100%;
            overflow: hidden;
            padding: 0 20px 20px;
            .info {
                display: flex;
                font-family: PingFangSC, PingFangSC-Regular;
                font-size: 14px;
                >div {
                    flex: 1;
                    line-height: 30px;
                    > .text {
                    opacity: 0.6;
                }
                }
                >div:first-child {
                    flex: 2;
                }
                .el-select {
                    width: 156px;
                }
                p {
                    font-family: PingFangSC, PingFangSC-Semibold;
                    font-weight: 600;
                    text-align: left;
                    color: rgba(0,0,0,0.85);
                }
                .el-tag {
                    height: 20px;
                    font-size: 12px;
                    border-radius: 11px;
                    line-height: 18px;
                }
            }
        }
    }
    // .text-gray {
    //     color: #ccc!important;
    // }
}
</style>
