<template>
    <div class="ls-vertical">
        <navbar v-if="action !== 'check'" icon="back" title="客户集团" :buttons="btns" @clickbutton="clickbtn"></navbar>
        <navbar v-if="action == 'check'" icon="back" title="客户集团"></navbar>

        <search ref="searchRef" :action.sync="action" :groupId.sync="groupId"></search>

        <!-- 客户列表 -->
        <div class="ls-container">
            <div class="ls-btn-row">
                <div class="left">
                    <img src="@/assets/img/public/icon-list.png" />
                    <span>客户列表</span>
                </div>
                <div v-if="action !== 'check'">
                    <el-button @click="addCustomer" type="primary" size="mini">新增</el-button>
                </div>
            </div>
            <div>
                <el-table :data="tableData" ref="tableRef" highlight-current-row size="mini" stripe border>
                    <el-table-column type="selection" width="50"> </el-table-column>
                    <el-table-column type="index" label="序号" width="50" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column v-for="(item, i) in colunms" :key="i" :prop="item.prop" :label="item.label" :fixed="item.fixed" :formatter="formatterData" :min-width="item.width"
                        :show-overflow-tooltip="item.tooltip">
                    </el-table-column>

                    <el-table-column v-if="action !== 'check'" label="操作" min-width="100" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="removeTableData(scope.$index, scope.row)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="ls-btn-row" v-if="!processId" style="margin-top: 20px;" v-show="isShow">
                <div class="left">
                    <img src="@/assets/img/public/icon-list.png" />
                    <span>日志</span>
                </div>
            </div>
            <log-table ref="proceLogTableRef" :busId.sync="groupId" v-show="isShow"></log-table>
            <approval-comment ref="approve" :moduleId="this.moduleId" v-if="processId" />
            <approval-log ref="log" v-if="processId" />
        </div>
        <digCustomer :customerInfo="formData" ref="digCustomerRef"></digCustomer>
    </div>
</template>

<script>
import search from "./components/search.vue";
import digCustomer from "../../../components/dig-customer.vue";

export default {
    name: "create-group",
    components: {
        search,
        digCustomer,
    },
    provide() {},
    mounted() {},
    created() {
        this.action = this.$route.query.action;
        if (this.action === "check" || this.action === "edit") {
            this.groupId = this.$route.query.groupId;
            this.getCmInfoGroup();
        }
        var processId = this.$common.getUrlParams("processId");
        if (processId && processId != "") {
            this.processId = processId;
        }
        this.operType = this.$route.query.operType;
        if (this.action == "create" || this.operType== 'create') {
            this.isShow = false;
        }
    },
    activated() {},
    data() {
        return {
            operType: "",
            isShow: true,
            moduleId: "3125",
            visible: false,
            processId: "",
            action: "",
            groupId: "",
            tableData: [],
            formData: {
                type: "groupApply",
                groupId: this.groupId,
            },
            btns: [
                {
                    title: "保存",
                    size: "mini",
                    circle: false,
                    type: "primary",
                    isplain: true,
                    btnEvent: "save",
                    show: true,
                    icon: "",
                },
                {
                    title: "提交",
                    size: "mini",
                    circle: false,
                    type: "primary",
                    isplain: false,
                    btnEvent: "submit",
                    show: true,
                    icon: "",
                },
                // {
                //   title: "",
                //   btnEvent: "refresh",
                //   size: "",
                //   circle: "circle",
                //   type: "refresh",
                //   show: true,
                //   icon: "",
                // },
            ],
            colunms: [
                {
                    prop: "customerNo",
                    label: "客户编码",
                    width: 120,
                    fixed: false,
                    tooltip: true,
                },
                {
                    prop: "customerName",
                    label: "客户名称",
                    width: 100,
                    fixed: false,
                    tooltip: true,
                },
                {
                    prop: "gradeId",
                    label: "客户等级",
                    width: 100,
                    fixed: false,
                    tooltip: true,
                },
                {
                    prop: "scale",
                    label: "企业规模",
                    width: 100,
                    fixed: false,
                    tooltip: true,
                },
                {
                    prop: "placeId",
                    label: "交易地点",
                    width: 100,
                    fixed: false,
                    tooltip: true,
                },
                {
                    prop: "typeName",
                    label: "客户类型",
                    width: 100,
                    fixed: false,
                    tooltip: true,
                },
                {
                    prop: "areaName",
                    label: "销售区域",
                    width: 100,
                    fixed: false,
                    tooltip: true,
                },
                // {
                //   prop: "filingPeriod",
                //   label: "建档年限",
                //   width: 100,
                //   fixed: false,
                //   tooltip: true,
                // }
                // {
                //   prop: "status",
                //   label: "客户状态",
                //   width: 100,
                //   fixed: false,
                //   tooltip: true,
                // }
            ],
        };
    },
    methods: {
        //新增用户
        addCustomer() {
            this.$refs.digCustomerRef.visible = true;
            this.formData.groupId = this.groupId;
            this.$refs.digCustomerRef.doQuery();
        },
        //设置数据
        setTableData(data) {
            for (let index = 0; index < data.length; index++) {
                data[index].groupStatus = "待归属";

                if (this.noRepeatData(data[index])) {
                    this.tableData.push(data[index]);
                }
            }
        },
        //去重数据
        noRepeatData(item) {
            let result = true;
            for (let index = 0; index < this.tableData.length; index++) {
                if (item.id === this.tableData[index].id) {
                    result = false;
                }
            }

            return result;
        },
        //移除数据
        removeTableData(index, row) {
            this.$confirm(`您确认移除该数据吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        //获取用户Id列表
        getCustomerIdList() {
            let customerIdList = this.tableData.map((customer) => {
                return customer.id;
            });
            return customerIdList;
        },
        //获取集团关联的用户列表
        getCmInfoGroup() {
            this.$ajax.post({
                domain: "crmCmUrl",
                url: "cmGroupApply.listCmInfoGroup",
                data: JSON.stringify({ id: this.groupId }),
                requestType: "body",
                showLoad: true,
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res.errorCode === 200) {
                        this.tableData = res.data || [];
                    }
                }.bind(this),
                error: function (res) {
                    this.$message.error(res.body.msg || res.msg);
                }.bind(this),
            });
        },
        //格式化数据
        formatterData(row, column, cellValue, index) {
            if (column.label === "客户状态") {
                if (cellValue === "auditing") {
                    return "审批中";
                } else if (cellValue === "audited") {
                    return "已审批";
                } else {
                    return "草稿";
                }
            }

            return cellValue;
        },
        // 导航栏按钮操作
        clickbtn(type) {
            switch (type) {
                case "refresh":
                    this.addTableData = [];
                    if (this.action !== "check") {
                        this.$refs.searchRef.initDictList();
                    }
                    if (this.action !== "create") {
                        this.$refs.searchRef.getGroupApply(this.groupId);
                        this.getCmInfoGroup();
                    }
                    break;
                case "save":
                    this.$refs.searchRef.saveOrSubmit("save");
                    break;
                case "submit":
                    this.$refs.searchRef.saveOrSubmit("submit");
                    break;
            }
        },
    },
    watch: {},
};
</script>

<style scoped lang="scss">
.ls-container {
    margin: 0;
    padding: 0 20px 10px;
    overflow-y: auto;
    .ls-btn-row {
        padding: 10px 0;
    }
}
</style>
