var buttonConfig = {
    template: /*language=HTML*/ `
        <el-form-item label="按钮配置">
            {{model}}
            <el-table :data="model['buttonConfig']" style="width: 100%" border>
                <!--                <el-table-column prop="value" label="值" width="120">-->
                <!--                    <template slot-scope="{ row }">-->
                <!--                        <el-input v-model="row.value" disabled></el-input>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column prop="originalText" label="原始文本" width="100"></el-table-column>
                <el-table-column prop="replacementText" label="替换文本">
                    <template slot-scope="{ row }">
                        <el-input v-model="row.replacementText" :disabled="row.disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="theme" label="主题">
                    <template slot-scope="{ row }">
                        <el-select v-model="row.theme" placeholder="请选择" :disabled="row.disabled">
                            <el-option label="primary" value="primary"></el-option>
                            <el-option label="success" value="success"></el-option>
                            <el-option label="warning" value="warning"></el-option>
                            <el-option label="danger" value="danger"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="100">
                    <template slot-scope="{ row }">
                        <el-input v-model="row.icon" placeholder="请输入图标名称" :disabled="row.disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="visible" label="是否可见" width="100">
                    <template slot-scope="{ row }">
                        <el-switch v-model="row.visible" :disabled="row.disabled"></el-switch>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
    `,
    props: {
        model: {
            type: Object,
            required: true
        }
        // field: {
        //     type: String,
        //     required: true
        // }
    },
    data() {
        return {
            tableData: [],
            button: {},
            defaultConfig: [
                { value: 0, originalText: "发起申请" },
                { value: 1, originalText: "同意申请" },
                { value: 2, originalText: "拒绝申请" },
                { value: 3, originalText: "退回上一步" },
                { value: 4, originalText: "跳转" },
                { value: 5, originalText: "重新提交" },
                { value: 6, originalText: "退回发起人" },
                { value: 20, originalText: "会签拒绝申请" }
            ]
        }
    },
    watch: {
        "model.buttonConfig": {
            handler(val) {
                this.$set(this.model, "buttonConfig", val)
            },
            deep: true
        },
        "model.performType": {
            handler(val) {
                if (val === "ALL") {
                    // 会签只有同意不同意
                    this.$set(this.model, "buttonConfig", [
                        { value: 1, originalText: "同意", visible: true, disabled: true },
                        { value: 20, originalText: "不同意", visible: true, disabled: true }
                    ])
                } else {
                    // 普通任务
                    // const visibleConfigs = this.model.buttonConfig.filter((item) => item.visible)
                    // if (visibleConfigs.length) {
                    //     this.$set(this.model, "buttonConfig", visibleConfigs)
                    // } else {
                    //     this.$set(this.model, "buttonConfig", [
                    //         { value: 1, originalText: "同意", visible: true, disabled: false },
                    //         { value: 2, originalText: "拒绝", visible: true, disabled: false },
                    //         { value: 3, originalText: "退回上一步", visible: true, disabled: false },
                    //         { value: 4, originalText: "跳转", visible: true, disabled: false },
                    //         { value: 6, originalText: "退回发起人", visible: true, disabled: false }
                    //     ])
                    // }
                }
            },
            deep: true
        },
        "model.name": {
            handler(val) {
                if (val === "startTask") {
                    // 申请只有发起申请
                    this.$set(this.model, "buttonConfig", [{ value: 0, originalText: "提交", visible: true, disabled: false }])
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        init() {
            if (this.model["buttonConfig"] === undefined) {
                this.$set(this.model, "buttonConfig", this.defaultConfig)
            }
        }
    },
    created() {
        this.init()
    }
}