<template>
  <el-dialog title="角色说明" :visible.sync="localRoleDialogVisible" center width="60%">
    <div class="tips-info">
      <ul>
        <li v-for="role in roles" :key="role.title">
          <span class="tit">{{ role.title }}：</span>
          <span class="content">{{ role.description }}</span>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'RoleDescriptionDialog',
  props: {
    roleDialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      localRoleDialogVisible: this.roleDialogVisible,
      roles: [
        {
          title: '药企业务管理员',
          description:
            '隶属于药企的业务管理员，为药企承担在要易业务管理平台用户管理、对与药企合作的CSO企业或团队管理、任务积分规则管理、任务发布、任务接单审核、任务审批、报告管理以及提交财务结算等工作。'
        },
        {
          title: '药企财务管理员',
          description: '隶属于药企的财务管理员，审核药企业务管理员提交的结算申请并启动结算支付等工作。'
        },
        {
          title: 'CSO业务管理员',
          description:
            '隶属于CSO企业的业务管理员，为CSO企业承担在要易业务管理平台用户管理、任务积分规则管理、任务管理、任务发布、任务接单审核、任务审批、报告管理以及提交财务结算等工作。'
        },
        {
          title: 'CSO财务管理员',
          description: '隶属于CSO企业的财务管理员，审核CSO业务管理员提交的结算申请并启动结算支付等工作。'
        },
        {
          title: '全职学术推广员',
          description: '隶属于企业的全职业务员，完成企业下发的任务。'
        },
        {
          title: '兼职学术信息沟通专员',
          description: '与企业进行平等业务合作的非全职业务员，申请、承接、完成企业下发的任务。'
        }
      ]
    };
  },
  watch: {
    // 监听prop的变化，更新本地变量
    roleDialogVisible(newVal) {
      this.localRoleDialogVisible = newVal;
    },
    localRoleDialogVisible(newVal) {
      if (newVal !== this.roleDialogVisible) {
        this.$emit('update:roleDialogVisible', newVal);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 样式调整可以在这里添加 */
.tips-info {
  ul {
    list-style: none;

    li {
      margin: 10px 0;
      display: flex;

      .tit {
        color: #000;
        width: 180px;
        text-align: right;
      }

      .content {
        flex: 1;
        color: #666;
      }
    }
  }
}
</style>
