<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="form-card">
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    规格名：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="specNameList"
                        :range-key="'key'"
                        @change="pickerChange"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            v-model="specName"
                            placeholder="请选择"
                        />
                    </picker>
                </div>
            </section>
        </div>

        <div class="form-card">
            <div class="head">
                <div class="tit">规格值</div>
                <div class="switch"></div>
            </div>

            <ul class="list">
                <li v-for="(item, index) of specList" :key="index">
                    <div class="name">{{ item }}</div>
                    <div class="tools">
                        <span class="edit" @click="edit(item, index)"
                            >编辑</span
                        >
                        <span class="remove" @click="remove(index)">删除</span>
                    </div>
                </li>
            </ul>
            <div class="add-btn" @click="add">新增规格值</div>
        </div>
        <div class="btn" @click="saveOk">完成</div>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'规格名称'"
                :content="false"
                :inputType="'text'"
                :value="editVal"
                placeholder="请输入规格名称"
                @confirm="popupConfirm"
            ></uni-popup-dialog>
        </uni-popup>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";

export default {
    name: "",
    components: { MyImage, uniPopup, uniPopupDialog },
    // 数据
    data() {
        return {
            specNameList: [], // 出售方式
            specName: "",
            specColumnName: "",
            specList: [],
            type: "add", // 编辑方式 add edit
            editIndex: 0,
            editVal: "",
        };
    },

    onLoad() {},

    onShow() {
        if (this.$store.state.common.specData) {
            this.specList = this.$store.state.common.specData.list;
            this.specName = this.$store.state.common.specData.name;
            this.specColumnName = this.$store.state.common.specData.columnName;
            this.$store.commit("common/update", {
                specData: null,
            });
        }
        this.getSpec();
    },

    // 函数
    methods: {
        getSpec() {
            this.api.get("/Product/GetSpecDropdownList").then((res) => {
                for (let item of res.data) {
                    item.key = item.name;
                    item.value = item.id;
                }
                this.specNameList = res.data;
            });
        },

        remove(i) {
            this.specList.splice(i, 1);
            this.specList = [...this.specList];
        },

        edit(val, index) {
            this.editIndex = index;
            this.type = "edit";
            this.editVal = val;
            this.$refs.popup.open({
                type: "dialog"
            });
        },

        add() {
            this.type = "add";
            this.$refs.popup.open({
                type: "dialog",
            });
        },

        popupConfirm(done, value) {
            if (!value) {
                return this.fn.showToast("请输入规格名");
            }
            if (this.type === "add") {
                this.specList.push(value);
            } else {
                this.specList.splice(this.editIndex, 1, value);
            }
            this.specList = [...this.specList];
            done();
        },

        saveOk() {
            if (!this.specName) {
                return this.fn.showToast("请设置规格名");
            }
            if (!this.specList === 0) {
                return this.fn.showToast("请设置规格值");
            }
            this.$store.commit("common/update", {
                specData: {
                    name: this.specName,
                    list: this.specList,
                    columnName: this.specColumnName,
                },
            });
            this.router.back();
        },

        pickerChange(e) {
            var index = e.detail.value;
            var name = this.specNameList[index].key;
            if (name != this.specName) {
                this.specName = name;
                this.specColumnName = this.specNameList[index].columnName;
                this.specList = [];
            }
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    padding-bottom: px(120);
    min-height: 100vh;
}
.page--iphoneX {
    padding-bottom: px(150);
    .btn {
        padding-bottom: px(30);
        background-color: rgb(0, 188, 38);
    }
}
.form-card {
    background-color: #fff;
    padding: 0 px(30);
    & ~ .form-card {
        margin-top: px(25);
    }
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(140);
        background-color: #fbfbfb;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        font-size: px(44);
    }
}
.form-item {
    display: flex;
    min-height: px(140);
    padding: px(30) 0;
    box-sizing: border-box;
    align-items: center;
    font-size: px(44);
    & ~ .form-item {
        border-top: 1px solid #f1f1f1;
    }
    .label {
        width: px(240);
        flex-shrink: 0;
        color: #999;
        margin-right: px(10);
    }
    .box {
        width: 100%;
        position: relative;
        input {
            width: 100%;
        }
    }
    .tool {
        flex-shrink: 0;
        color: #999;
        margin-left: px(10);
    }
    textarea,
    input {
        max-width: 100%;
        width: 100%;
    }
}
.list {
    // min-height: 100vh;
    // background-color: #fff;
    // border-bottom: 1px solid #f1f1f1;
    li {
        padding: px(0) px(35);
        height: px(140);
        line-height: px(140);
        font-size: px(44);
        border-top: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .name {
        max-width: 75%;
        @include omit(75%);
    }
    .tools {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        span {
            display: inline-block;
            border: 1px solid #f1f1f1;
            font-size: px(36);
            height: px(80);
            width: px(120);
            display: flex;
            justify-content: center;
            align-items: center;
            & ~ span {
                margin-left: px(30);
            }
        }
        .remove {
            color: #f00;
        }
    }
}
.btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: px(120);
    background-color: rgb(0, 188, 38);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.add-btn {
    height: px(120);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: px(50) px(35) 0;
    border: 1px solid #ccc;
    border-radius: px(10);
}
.required {
    color: #f00;
    font-size: px(44);
    &.hide {
        visibility: hidden;
    }
}
</style>