<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <div class="titles">新增纪念币</div>
            <el-form status-icon label-width="150px" class="demo-ruleForm" ref="formItem" :model="formItem">
                <div class="itemBox">
                    <!-- <el-form-item label="序   号">
                        <el-input
                        v-model="formItem.id"
                        class="input-item"
                        />
                    </el-form-item> -->
                    <el-form-item label="纪念币名称">
                        <el-input
                        v-model="formItem.name"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="纪念币编号">
                        <el-input
                        v-model="formItem.number_id"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="编号类型">
                        <!-- <el-input
                        v-model="formItem.number_type"
                        class="input-item"
                        /> -->
                        <el-select v-model="formItem.number_type"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in number_type_arr"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="原  名">
                        <el-input
                        v-model="formItem.init_name"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="年  代1">
                        <!-- <el-input
                        v-model="formItem.years"
                        class="input-item"
                        /> -->
                        <el-select v-model="formItem.years" placeholder=""  style="width: 250px; "  @change="changeYears1">
                            <el-option
                            v-for="item in yearsData"
                            :key="item.yearsName"
                            :label="item.yearsName"
                            :value="item.yearsName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年  代2">
                        <!-- <el-input
                        v-model="formItem.years"
                        class="input-item"
                        /> -->
                        <el-select v-model="formItem.years2" placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in yearsData2"
                            :key="item.yearsName"
                            :label="item.yearsName"
                            :value="item.yearsName">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="发行时间">
                        <el-input
                        v-model="formItem.issue_time"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="文物类别">
                        <el-select v-model="formItem.category"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in culturalRelicTypeArr"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="面值">
                        <el-input
                        v-model="formItem.money_size"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item  label="质地">
                        <el-input
                        v-model="formItem.texture"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="实际数量">
                        <el-input
                        v-model="formItem.count"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="通长(cm)">
                        <el-input
                        v-model="formItem.long"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="通宽(cm)">
                        <el-input
                        v-model="formItem.width"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="通高(cm)">
                        <el-input
                        v-model="formItem.height"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="质量范围">
                         <el-select v-model="formItem.quality_range"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in quality_range_arr"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </div>
                <div class="itemBox">

                    <el-form-item label="具体质量">
                        <el-input
                        v-model="formItem.specific_quality"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="质量单位">
                         <el-select v-model="formItem.quality_company"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in quality_company_arr"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="文物级别">
                       <el-select v-model="formItem.lv"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in culturalRelicLevelArr"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="文物来源">
                        <el-select v-model="formItem.source"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in culturalRelicSourceArr"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="完残程度">
                         <el-select v-model="formItem.remnant_state"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in degreeDisability"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="完残状况">
                        <el-input
                        v-model="formItem.remnant_state"
                        class="input-item"
                        />
                    </el-form-item> -->

                    <el-form-item label="保存状态">
                        <el-select v-model="formItem.save_state"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in save_state_arr"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入藏年度">
                        <el-select v-model="formItem.entering_tibet_years"  placeholder=""  style="width: 250px; ">
                            <el-option
                            v-for="item in timeArr"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="摘 要">
                        <el-input
                        v-model="formItem.abstract"
                        type ="textarea"
                        style="height:150px"
                        class="input-item"
                        :autosize="{ minRows:6, maxRows: 6}"
                        resize="none"
                        />
                    </el-form-item>
                    <el-form-item label="收入数量">
                        <el-input
                        v-model="formItem.income"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="支出数量">
                        <el-input
                        v-model="formItem.expenditure"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="结存">
                        <el-input
                        v-model="formItem.balance"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="借出数量">
                        <el-input
                        v-model="formItem.lend_count"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="出入库动向">
                        <el-input
                        v-model="formItem.out_state"
                        class="input-item"
                        />
                    </el-form-item>

                </div>
                <div class="itemBox">

                   <el-carousel :interval="5000" arrow="always" height="230px" style="padding:0">
                        <el-carousel-item  v-for="(item,i) in formItem.images" :key="item.url+i"  style="height:230px;padding:0">
                            <el-image :src="item.url"   @click="showBigImg(item.url)"  style="width: 430px; height:230px;"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="upBtnBox">
                        <el-upload
                            class="upload-demo"
                            :action="uploadUrl"
                            :on-success="upSuccess"
                            :show-file-list="false"
                            :limit=1
                            >
                            <el-button class="myBtn" style="background:#529bcc;color:#fff">添加一张图片</el-button>
                        </el-upload>
                        <el-upload
                            class="upload-demo"
                            :action="uploadUrl"
                            :multiple="true"
                            :on-success="upSuccess"
                            :show-file-list="false"
                            :limit=10
                            >
                            <el-button class="myBtn" style="background:#317caf;color:#fff">选择多张图片</el-button>
                        </el-upload>
                    </div>


                    <el-form-item label="保护措施">
                        <el-input
                        v-model="formItem.protective_measures"
                        class="input-item"
                        />
                    </el-form-item>

                    <el-form-item label="标签">
                        <el-input
                        v-model="formItem.label"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input
                        v-model="formItem.remarks"
                        class="input-item"
                        />
                    </el-form-item>

                    <el-form-item label="经手人">
                        <el-input
                        v-model="formItem.handler"
                        class="input-item"
                        />
                    </el-form-item>
                    <el-form-item label="核对人" style="margin-bottom:235px">
                        <el-input
                        v-model="formItem.checked"
                        class="input-item"
                        />
                    </el-form-item>
                    <div class="btnBox">
                        <el-button class="myBtn" style="background:#ff7200;color:#fff" @click="addMoney">确认添加</el-button>
                        <el-button class="myBtn" style="background:#b6b6b6;color:#fff" @click="back">取消返回</el-button>
                    </div>

                </div>
            </el-form>
        </div>
        <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    components: { ElImageViewer },
    data(){
        return{
            uploadUrl:"https://jingji-h5.ecps.com.cn//3320/index.php?s=imagesUpload",
            formItem:{
                abstract: "",
                balance: "",
                category: "",
                checked: "",
                count: "",
                created_at: "",
                data_id: "",
                data_type: "",
                entering_tibet_time: "",
                entering_tibet_years: "",
                expenditure: "",
                handler: "",
                height: "",
                id: "",
                images: [],
                income: "",
                init_name: "",
                issue_time: "",
                label: "",
                lend_count: "",
                long: "",
                lv: "",
                money_size: "",
                name: "",
                number_id: "",
                number_type: "",
                out_state: "",
                protective_measures: "",
                quality_company: "",
                quality_range: "",
                remarks: "",
                remnant_degree: "",
                remnant_state: "",
                save_state: "",
                source: "",
                specific_quality: "",
                state: 0,
                texture: "",
                updated_at: "",
                width: "",
                years: "",
                years2: "",
            },
            urls:require("../../../static/img1.png"),
            culturalRelicTypeArr:[
                {label: "金银币"},
                {label: "纸币"},
                {label: "流通纪念币"},
                {label: "电子货币"},
                {label: "其它"},
                {label: " 实物出入账"}
            ],
            textureTypeArr1:[
                {label: "单一质地"},
                {label: "有机质"},
                {label: "无机质"},
                {label: "复合或组合质地"},
                {label: "石"},
                {label: "瓷"},
                {label: "砖瓦"},
                {label: "泥"},
                {label: "陶"},
                {label: "玻璃"},
                 {label: "铁"},
                 {label: "铜"},
                 {label: "宝玉石"},
                 {label: "金"},
                 {label: "银"},
                 {label: "其他金属"},
                 {label: "其他无机质"},
            ],
            textureTypeArr2:[],
            culturalRelicLevelArr:[
                {label: "一级"},
                {label: "二级"},
                {label: "三级"},
                {label: "一般"},
                {label: "未定级"},
            ],
            culturalRelicSourceArr:[
                 {label: "征集购买"},
                 {label: "接受捐款"},
                 {label: "拔交"},
                 {label: "移交"},
                 {label: "旧藏"},
                 {label: "发掘"},
                 {label: "采集"},
                 {label: "拣选"},
                 {label: "其他"},
            ],
            degreeDisability:[
                {label: "完整"},
                {label: "基本完整"},
                {label: "残缺"},
                {label: "严重残缺（含缺失部件）"},
            ],
            timeArr:[
                {label: "1949.10.1前"},
                {label: "1949.10.1-1965"},
                {label: "1966-1976"},
                {label: "1977-2000"},
                {label: "2001至今"},
            ],
            id:0,
            showViewer:false,
            srcList:[],
            number_type_arr:[
                "藏品总登记号",
                "辅助账号",
                "索书号",
                "档案编号",
                "固定资产登记号",
                "财产登记号",
                "出土(水)登记号",
                "其他编号"
            ],
            save_state_arr:[
                '状态稳定，不需修复',
                '部分损腐，需要修复',
                '腐蚀损毁严重，急需修复',
                '已修复',
            ],
            quality_range_arr:[
                '<0.01 kg',
                '0.01-1 kg',
                '1-50 kg',
                '50-100 kg',
                '100-1000 kg',
                '>1000 kg',

            ],
            quality_company_arr:[
                'g',"kg"
            ],
            remnant_state_arr:[],
            yearsData:[],
            yearsData2:[],

        }
    },
    created(){
        this.getYears();
    },



    methods:{
        upSuccess(e){
            if(e.code==0){
                this.formItem.images.push(e.data)
            }else{
                this.$message(res.message);
            }
        },
        getYears(){
            this.$api.getYears({
              type:0,
              id:0
            }).then((res) => {
                if(res.code==0){
                   this.yearsData=res.data;
                }else{
                    this.$message(res.message);
                }
            })
        },
        changeYears1(val){
            let id=0;
             this.yearsData.find((item)=>{
                if( item.yearsName === val){
                    id=item.id;
                    this.getYears2(id);
                }
            });
        },
        getYears2(id){
            this.$api.getYears({
              type:0,
              id:id
            }).then((res) => {
                if(res.code==0){
                    this.formItem.years2="";
                    this.yearsData2=res.data;
                }else{
                    this.$message(res.message);
                }
            })
        },
       addMoney(){

            this.$api.addMoney(this.formItem).then((res) => {
                if(res.code==0){
                     this.$message("新增成功！");
                    this.$router.replace({
                        path:"/retrievalcommemorative"
                    })
                }else{
                    this.$message(res.message);
                }
            }).catch((res) => {

            });
       },
       back(){
            this.$router.replace({
                path:"/retrievalcommemorative"
            })
        },
        showBigImg(src){
            this.srcList=[src];
            this.showViewer=true;
        },
        closeViewer() {
            this.showViewer = false
        },

    }
}
</script>
<style scoped>
    .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
    .titles{
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #ababab;
        line-height: 90px;
        font-size: 26px;
        color: #1b1b1b;
        padding-left: 20px;
        font-weight: bold;
    }
    .demo-ruleForm{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1350px;
        height: 918px;
        margin: 0 auto;
    }
    .itemBox{
        width: 400px;
    }
    .btnBox{
        margin-top: 130px;
        padding-bottom:20px ;
        width: 400px;
        display: flex;
        justify-content: flex-end;
    }
    .myBtn{
        width: 200px;
    }
      .upBtnBox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
    }
</style>
